垂直居中和水平居中总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/51570313

一 、table-cell

#container{     
    width: 1300px;
    height: 700px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#center{
    display:inline/block/inline-block;
 }

以上代码可使块级子元素水平垂直居中，为inline-block的子元素只能垂直居中，若也想其水平垂直居中确保在父元素样式中添加 text-align: center。关键必须设置其父元素固定宽高。即使有多个子元素也一样可以垂直水平居中。

当子元素都为行内元素（行内元素不能包裹块级元素，所以就没有加img啦），效果和块级元素一样各成一行，我也觉得不可思议。

当子元素都为块级元素

当子元素都为行内块元素

咳咳，看着他们乖乖的排列真开心啊~~~

---

二、CSS3 transform+absolute——(1)

#container{     
        position: relative;
}

#center{
    position: absolute;
    left: 50%;
    top:50%;
    -webkit-transform: translate3D(-50%,-50%,0%);
    transform: translate3D(-50%,-50%,0%);
 }

优势在于不需要知道父元素和子元素的宽高。

完美二维居中，屡试不爽，然，常在河边走，哪有不湿鞋···这玩意儿会导致其内部文字模糊···咳咳，死穴。搞搞图片啥的就行了。

---

三、CSS3 transform+absolute——(2)

#container{    
        width: 100%;
        height: 100%; 
        position: relative;
}

#center{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 400px;
 }

这样依然可以玩居中，而且不用担心兼容性问题，唯一麻烦些的也就是要确定子元素宽高。

---

四、顺便提一提Flex

在IE上兼容很不理想，虽然其他浏览器灰常完美，但是没法···水桶的容量总是取决于最短的木板·····

#container{    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;/*         /column/*-reverse        */
}

#center{
    flex: 1;
 }

---

五、line-height==height

其实无所谓line-height是否等于height，文字始终是在line-height垂直中间的