line-height 内部元素非固定高度 垂直居中

                        
                            .container{
                                border: 1px solid #ff8c2e;
                                height: 100px;
                                width: 200px;
                                line-height:100px;//只对于inline元素(包括图片行内元素+文本)有效，对inline-block也无效！，区别vertival-align在table-cell中对块级元素都有作用
                                // 会继承！内部元素的行高都会变
                            }
                            .content{
                                background-color: green;
                                display: inline; //必须是inline元素
                            }
元素里面
元素外面

line-height 内部元素非固定高度 垂直居中 + 让图片和文字垂直居中！！

                        
                            .container{
                                border: 1px solid #ff8c2e;
                                height: 100px;
                                width: 200px;
                                line-height:100px;//只对内部的于inline元素(包括图片行内元素+文本)有效，对内部inline-block也无效！，区别vertival-align在table-cell中对块级元素都有作用
                                // 会继承！内部元素的行高都会变
                            }
                            .content{
                                background-color: green;
                                display: inline; //必须是inline元素
                            }
                            img{
                                vertical-align: middle; //注意 vertical-aligin特殊作用，定义在本身，作用也发挥在本身。
                                // 一般用法 必须定义在父元素为inline、table-cell元素上，对内部的任何元素都其作用
                                // vertical-algin 不会继承，line-height会继承！
                                // 神奇发生了，此时图片会下移动，达到与文字中央，（文字不会动）
                            }
元素里面
元素外面

dispaly:table-cell + vertical-align：middle 内部元素非固定高度 垂直居中

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            height: 100px;
                            width: 200px;
                            display: table-cell; //仍然块级特性 + vertical-align 起作用,无论内部是什么元素，即使是块级元素
                            vertical-align: middle; // 必须定义在父元素为inline、table-cell元素上，对内部的任何元素都其作用）
                            // 还有一种用法，定义在img元素上，其作用也是对元素本身，它本身向下移动，与文本居中对齐
                            //注意！ 此方式，父元素不能是脱离文档流 如 position:absolute float
                            // 注意relative不脱离文档流，原来位置也还在，但是属于定位元素，z-index只能作用在定位元素（absolute+relative+fixed）
                            // float 虽然也是脱离文档流的，但是z-index不能起作用
                        }
                        .content{
                            background-color: green;
                            display: inline-block; //（块级元素也能垂直居中） 这里是为了让后面的文字不换行，否则是两个元素整体的垂直居中
                        }
元素里面
元素外面

absolute:top 50% + margin-top:-xxpx 内部元素固定高度 垂直居中

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            height: 100px;
                            width: 200px;
                            position: relative;
                        }
                        .content{
                            position: absolute; // 可以作用于任何元素，包括inline元素，如span
                            top: 50%;
                            margin-top: -17.5px;
                            width: 45px;
                            height: 35px;// 元素内容无（除非元素时图片），必须设置元素宽高才会显示，如果内部有文字，文字垂直居中还是按照其他方式才行

                        }

absolute:top 50% + transform: translateY(-50%) 内部元素非固定高度 垂直居中

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            height: 100px;
                            width: 200px;
                            position: relative;
                        }
                        .content{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);// ie9>=才可以兼容
                            width: 45px;
                            height: 45px;
                            background-color: green;
                        }

position:flex + align-item:center 内部元素非固定高度 垂直居中

                    

                        .container{
                            display: flex;//ie9才支持
                            align-items: center; //都作用在父元素（伸缩容器），水平是justify-content:center
                        }
                        .content{
                            width: 45px;
                            height: 45px;
                            background-color: green;
                        }

也是最简单有效但个性参数要求高的方式，同设置margin/padding 设置成具体值 移动元素 达到垂直居中 适合内部元素固定高度,外部元素也固定高度 

                    

                        .container{
                             height: 100px; //父元素高求高度已知
                        }
                        .content{
                            margin-top: (100-45)/2px;
                            width: 45px;
                            height: 45px; //本元素高求高度也已知
                            background-color: green;
                        }

也是最简单有效但个性参数要求高的方式，同设置display:relative 设置成具体值 移动元素 达到垂直居中 适合内部元素固定高度,外部元素也固定高度 

                    

                        .container{
                            height: 100px; //父元素高求高度已知
                        }
                        .content{
                            position: relative;
                            top: (100-45)/2px;
                            width: 45px;
                            height: 45px; //本元素高求高度页也已知
                            background-color: green;
                        }