关于css实现水平垂直居中的方案及对比(2)---不定宽高

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

上文总结了定宽高元素实现水平垂直居中的方法，本文总结不定宽高元素的水平垂直居中的方法。

本文继续使用此例子，通过以下方法让needMid元素垂直水平居中

<div class="parent">
   <div class="needMid">000
   </div>
<div>

absolute + transform

通过设置父元素position:relative为相对定位，设置需要居中的子元素position:absolute。接着设置元素距顶部和左部50%，最后，是需要使用到css3新增的transform属性，只要将translate的水平和垂直方向均设置为-50%，则会将元素位移自己宽度和高度的-50%，就可以实现水平垂直居中了。

代码如下：

.parent{
    position: relative;
}
.needMid{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

缺点：该方法兼容性依赖transform的兼容性

优点：无需知道元素的宽高

flex

flex布局是比较常用的，只需要设置将水平方向justify-content属性和垂直方向的align-items属性为center即可。目前在移动端，flex布局已经成为主流的布局方式。

代码如下：

.needMid{
    display: flex;
    justify-content: center;
    align-items: center;
}

缺点：pc端需要考虑是否兼容flex布局

优点：代码简单，常用

grid

grid也是css新出的网格布局，也可以通过align-self和justify-self属性设置居中从而实现水平垂直居中布局。

代码如下：

.parent{
    display: grid;
}
.needMid{
    align-self: center;
    justify-self: center;
}

缺点：兼容性不如flex

优点：代码简单

line-height

通过将需要居中的元素设置为行内元素，然后设置text-align:center可以实现水平居中,设置vertical-align: middle可以实现垂直居中

代码如下：

.parent{
    line-height:200px;
    text-align: center;
    font-size: 0px;
}
.needMid{
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: center; 
}

缺点：这种方法需要在子元素中将文字显示重置为想要的效果

css-table

利用css新增的table属性，也可以实现水平垂直居中，该属性可以让我们把普通元素变成table元素的效果。

代码如下：

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.needMid {
    display: inline-block;
}

以上，就是相对比较常用的几种元素不定宽高实现垂直水平居中的几种方式。其中，最推荐也是最常用的就是flex布局啦。