垂直居中的几种方法总结

1、使用CSS3的flex-box

通过将父元素的display设置为flex,并将子元素的margin设置为auto即可实现，不过这种方法有些兼容问题

如下：

.outer {
    width:400px;
    height:400px;
    border:1px solid #000;
    display:flex;
}

.inner {
    width:200px;
    height:200px;
    border:1px solid #000;
    margin:auto;
}

这种方式不需要首先知道子元素的宽高，会根据内容自适应，还是很方便的。

2、通过绝对布局的方式

设置父元素的position为relative,子元素的position为absolute,并设置其left,right,top,bottom都为0，margin为auto

.outer {
    position:relative;
    width:400px;
    height:400px;
    border:1px solid #000;
}
.inner {
    position:absolute;
    width:200px;
    height:200px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border:1px solid #000;
}

但是这种方法必须首先知道子元素的高度，否则高度会充满父容器，因为top和bottom都为0

3、top和margin相结合的方式

个人觉得这种方法比较麻烦，但是之前好像还是一种比较常用的方式，最开始学前端时网上搜到的都是这种，也是利用了margin值可以设为负值这一性质吧

.outer {
    position:relative;
    width:400px;
    height:400px;
    border:1px solid #000;
}
.inner {
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    margin-top:-100px;
    left:50%;
    margin-left:-100px;    /*margin-left:auto;      margin-right:auto;*/      border:1px solid #000;
}

当然这种方法根据子元素的宽高设置margin值，所以首先也必须要知道子元素的宽高，不是很方便。

4、通过table-cell的方式

通过设置元素的display:table-cell是其展示出表格中的单元格的显示特性，同时利用vertical-align属性设置内部元素的对齐方式。

.outer {
     display:table;
     text-align:center;
     width:400px;
     height:400px;
     border:1px solid #000;
}
.inner {
     display:table-cell;
     vertical-align:middle;
     border:1px solid #000;
}

<div class="outer">
    <div class="inner">
        我是inner
        <div>我是inner中的一个div</div>
    </div>
</div>

效果如下：

通过这种方式，inner是充满outer的，其内部的元素垂直居中，而无论内联元素还是块级元素都有效，很适合内部内容高度未知的情况。

以上是我目前所了解的几种方法，以后再慢慢总结完善~~~~