css水平垂直居中方式

划重点啦！"css实现元素垂直水平居中"是一道前端工程师面试必考题，很多面试官都喜欢问这个问题。如图：

实现这个效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下。

首先，我们先把公共部分的代码写出来。

html代码如下：

<div class='box'>

<p class='centerBox'></p>

</div>

css代码如下：

<style>

.box{

width:300px;

height:300px;

border:2px solid #f4a2a3;

}

.centerBox{

background:#7ab6f5;

}

</style>

元素固定宽高

元素固定宽高情况下，实现元素垂直水平居中有如下三种方式：

NO.1 利用absolute+margin

css代码如下：

<style>

.box{

position:relative;

}

.centerBox{

width:100px;

height:100px;

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}

</style>

这种方式通过设置各个方向的距离都是0，再将margin设为auto，就可以在各个方向上居中了。

优点：兼容性好。

缺点：需要知道子元素的宽高，如果不给子元素指定宽高，子元素将会占满父容器的位置。

NO.2 利用absolute+负margin

css代码如下：

<style>

.box{

position:relative;

}

.centerBox{

width:100px;

height:100px;

position:absolute;

left:50%;

top:50%;

margin-left:-50px;/* 为元素width/2 */

margin-top:-50px; /* 为元素height/2 */

}

</style>

这种方式利用了绝对定位的百分比首先实现子元素左上角居中，然后通过margin的负值来实现子元素垂直水平居中。

优点：好理解，兼容性好。

缺点：需要知道子元素宽高，margin需要计算得出。

NO.3 利用absolute+calc

css代码如下：

<style>

.box{

position:relative;

}

.centerBox{

width:100px;

height:100px;

position:absolute;

left:calc(50% - 50px);/*calc(50%-子元素高度一半)*/

top:calc(50% - 50px);/*注意使用时减号间有空格*/

}

</style>

这种方式是由方法二的负margin延伸出来的，利用css3新增的calc计算属性来实现元素垂直水平居中。

优点：不用自己计算宽高。

缺点：需要考虑calc的兼容性和语法，需要知道子元素宽高。

到现在其实会发现以上三种方式的共同缺点都是需要知道子元素的宽高。但是，在通常情况下，对那些需要居中的元素来说，其宽高往往是由其内容来决定的，不建议固定宽高。那么，我们再来看一下子元素不固定宽高的情况下，实现垂直水平居中的5种方式。

元素不固定宽高

NO.1 利用absolute+translate

css代码如下：

<style>

.box{

position:relative;

}

.centerBox{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

/*针对元素本身向左以及向上移动50%*/

}

</style>

这种方式是使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了。

优点：不用设置宽高，不用计算。

缺点：会脱离文档流，考虑translate的兼容性。

NO.2 利用line-height

css代码如下：

<style>

.box{

line-height: 300px;

text-align: center;

font-size: 0px;

}

.centerBox{

font-size: 16px;

display: inline-block;

line-height: initial;

}

</style>

这种方式是将子元素设置为行内元素，然后使用文本垂直水平居中的方式实现元素垂直水平居中。

优点：不需要考虑定位浮动。

缺点：子元素需要重新设置文字效果。

NO.3 利用table-cell

css代码如下：

<style>

.box{

display: table;

}

.centerBox{

display: table-cell;

text-align: center;

vertical-align: middle;

}

</style>

这种方式是利用了table标签可以实现垂直水平居中的特性，但是table标签会增加冗余代码。css新增的table属性，可以让我们把普通元素，变为table元素来现实效果。

优点：不需要修改原本结构使用table属性。

缺点：有时候会需要多嵌套一层。

NO.4 利用flex

css代码如下：

<style>

.box{

display: flex;

justify-content: center;/*左右居中*/

align-items: center;/*垂直居中*/

}

</style>

这种方式是利用了css3新增的flex属性，很多时候可以完美的代替css2的浮动和定位进行页面布局。

优点：代码简单，兼容手机端。

缺点：pc端考虑flex的兼容。

NO.5 利用grid

css代码如下：

<style>

.box{

display: grid;

justify-content: center;

align-content: center;

}

</style>

此方法是利用了css3新增的grid属性,和flex方法类似。

优点：代码简单。

缺点：兼容性问题较大。

总结

我们一共介绍了8种实现垂直水平居中的方式。前三种方式需要确定子元素宽高，结合absolute定位来实现。后五种则不需要考虑子元素宽高，直接设置css属性。结合各个方式的优缺点大家可以根据自己的实际情况来选择实现方式。