论CSS水平垂直居中

CSS中常见的就对元素进行水平垂直布局。

<div class="container">
    <div class="box">
        <span>水平居中垂直居中</span>
    </div>
</div>

对元素进行水平居中是很简单，只要分清是行内元素还是块级元素：
如果元素是一个行内元素， 就在它的父元素中使用 text-align: center;

.box{
        width: 200px;
        height: 100px;
        background-color: #24b8e9;
        text-align: center;/* 水平居中 */
        line-height: 100px;/* 在行内元素只有一行时，行间距和高度一样实现垂直居中 */
    }

效果：

如果它是一个块级元素，就在元素本身自身使用用 margin: auto。

.box{
        width: 200px;
        height: 100px;
        background-color: #24b8e9;
        margin: 0 auto;/* 正对于元素父元素水平居中 */
    }

效果：

此时我们发现元素并没有垂直居中。对一个元素进行垂直居中，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。

表格布局法 table-cell(利用表格的显示模式)需要用到一些冗余的 HTML 元素，实现起来不够优雅简洁，不推荐使用）：

<div class="container">
    <div class="content">
        <div class="box">水平垂直居中</div>
    </div>
</div>

.container {
    width: 300px;
    height: 300px;
    background-color: #ccc;
    display: table;
}
.content {
    display: table-cell;
    vertical-align: middle;/* 使子元素垂直居中 */
    text-align: center;/* 使子元素水平居中 */
}
.box {
	width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #24b8e9;
    display: inline-block;
}

flex布局
不需要自定元素宽高

<div class="container">
    <div class="box">水平垂直居中</div>
</div>

第一种：

.container {
   background-color: #ccc;
    width: 300px;
    height: 300px;
    display: flex;/*flex布局*/
    justify-content: center;/* 水平居中 */
    align-items: center;/* 垂直居中 */
}
.box {
    background-color: #24b8e9;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

第二种：在flex布局下margin: auto可以水平方向、垂直方向上将元素居中。

.container {
    background-color: #ccc;
    width: 300px;
    height: 300px;
    display: flex;
}
.box {
    background-color: #24b8e9;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    margin: auto;
}

3.position定位

<div class="container">
    <div class="box">水平垂直居中</div>
</div>

父元素设置相对定位

.container {
    background-color: #ccc;
    width: 300px;
    height: 300px;
    position: relative;
}

子元素已知宽度：
负外边距方法：

.box {
   background-color: #24b8e9;
   width: 100px;
   height: 100px;
   text-align: center;
   line-height: 100px;
   position:absolute;
   left: 50%;
   top: 50%;
   /* margin: -50px 0 0 -50px; */
   margin-top: -50px;
   margin-left: -50px;
}

原理：

• 将子元素的左上角放置在父元素的正中心；
• 再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把子元素的正中心放置在视口的正中心。

还可以使用calc()函数实现：

.box {
    background-color: #24b8e9;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position:absolute;
    left: calc(50% -50px);
    top: calc(50% -50px);
}

定位0(需确定内部元素的高度)

.box {
    background-color: #24b8e9;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position:absolute;
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

子元素未知宽度：

.box {
   background-color: #24b8e9;
   width: 100px;
   height: 100px;
   text-align: center;
   line-height: 100px;
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

水平垂直居中效果：

以上仅自己平时使用积累。