垂直居中

已知高度宽度元素的水平垂直居中

1.绝对定位与负边距实现。

利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。核心CSS代码如下：

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

2.绝对定位与margin

这种方法也是利用绝对定位与margin，但是无需知道被垂直居中元素的高和宽。核心代码如下：

#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

未知高度和宽度元素的水平垂直居中

1.当要被居中的元素是inline或者inline-block元素

当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

#container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
#center{

}

2.利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中

#container{
    position:relative;
}
#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.flex布局轻松解决

#使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

#center{

}

transform和flex需要考虑兼容性。
某些浏览器需要加前缀

.flexboxtest{
   display: flex;
   display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀
}