水平垂直居中

它为什么备受关注？

并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。

将各个问题分类，给出常用解

水平居中

行内元素：

text-align:center

html:

<div>
   <a href="#">text-align:center</a>
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    text-align: center;
}
a{
    color: #000;
}

单行块级元素

已知宽：margin：0 auto；

html：

<div>
    width:200px;
    margin：0 auto；
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    width :200px;
    margin: 0 auto;
}

当它是float的时候，效果并不理想！
float:left;

已知宽:position : absolute;

html:

<div>
    position: absolute;<br>
    width :300px;<br>
    left: 50%;<br>
    margin-left: -150px;
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    width :300px;
    left: 50%;
    margin-left: -150px;
}

不需要已知宽：position：absolute;

html:

<div>
    position: absolute;<br>
    left: 50%;<br>
    transform: translateX(-50%);
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

多行块级元素

display : flex;

html:

<div class="parent">
    <div class="child">
        display:flex;
    </div>
    <div class="child">
        display:flex;
    </div>
    <div class="child">
        display:flex;
    </div>
    <div class="child">
        display:flex;
    </div>
</div>

css:

.parent{
    display: flex;
    justify-content: center;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    background-color: #cbcbcb;
    padding: 0 20px;
}

display : inline-block;

html：

<div class="parent">
    <div class="child">
        display:inline-block;
    </div>
    <div class="child">
        display:inline-block;
    </div>
    <div class="child">
        display:inline-block;
    </div>
    <div class="child">
        display:inline-block;
    </div>
</div>

css：

.parent{
    text-align: center;
    padding: 0;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    display: inline-block;
    background-color: #cbcbcb;
    padding: 0 20px;
}

小问题

有没有发现，inline-blodk之间是有边距的？这可不是bug,是因为元素之间存在空格，如何去消除呢？去除inline-block元素间间距的N种方法

垂直居中

行内元素

padding：30px 0;

html:

<p>
    <a href="#">
        padding-top: 30px 0;
    </a>
</p>

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    padding: 30px 0;
}
a{
    color:#000;
}

line-height : height;

html:

<p>
    <a href="#">
        height: 100px;
        line-height: 100px;
    </a>
</p>

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
    line-height: 100px;
}
a{
    color: #000;
}

多行行内元素

vertical : middle;

html:

<div>
    <table>
        <tr>
            <td>default:<br>
                vertical:middle
            </td>
        </tr>
    </table>
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
table{
    height: 100px;
}

display : flex;

html:

<div>
    <a href="#">
        display:flex<br>
        flex-direction: column;<br>
        justify-content: center;
    </a>
</div>

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
a{
    color: #000;
}

加入幽灵元素

html:

<div>
    <a href="#">
        display:flex<br>
        flex-direction: column;<br>
        justify-content: center;
    </a>
</div>

css:

.ghost{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
}
.ghost:before{
    content: "";
    display: inline-block;;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
a{
    display: inline-block;
    vertical-align: middle;
    color: #000;
}

单行块级元素

实现原理同水平居中。

多行块级元素

实现原理同水平居中的display：flex;

水平垂直居中

综合运用水平垂直居中即可。

参考资料

Centering in CSS: A Complete Guide
Flexbox详解