css 实现元素水平垂直居中的几种方法

在做网页的时候经常会需要让某一个元素水平垂直居中，而要实现水平垂直居中有很多种方法，不知道你们有没遇到这种情况：方法倒是知道，甚至还知道许多种，可一到真正用到的时候，却突然在努力地回想，这或许就是人们经常说的「脑子短路」，所以，这篇文章和大家一起来温故而知新，梳理一下常见的几种元素水平垂直居中的方法，以后突然短路了，就翻出来看一看，而且万一以后面试就问到了，那就更好不过了。

div 元素的水平垂直居中

让一个 div 元素水平垂直居中，有很多种方法。

1. 最先想到的就是使用绝对定位 + margin: auto的实现方式，这也是最靠谱的一种实现方式，兼容性还不错。为什么说它靠谱呢？因为它利用了 css 流体的特性，即页面的默认文档流是自上而下，自左向右。我们先来看下它的实现代码：

HTML代码

<div class="dialog">
   <div class="text"></div>
</div>

CSS代码

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

效果如下

此方法对父元素使用相对定位，然后子元素使用绝对定位，这样子元素将相对父元素进行定位，接着设置各个方向的 left/top/right/bottom 为 0，再设置 margin: auto ，然后就非常巧妙了：把它的各个定位值置为 0 后，剩下的空间交由 margin 去自动分配，由于流特性，它将均匀评分剩下的空间，于是便水平垂直地居中了。

上面这种方法推荐使用，除此之外还有其它方法，相信很多人也经常看到，这里也列举下，有些都差不多，只是属性的不同使用。
2. 第二种是已知宽度，margin 负值的方法，代码如下：

HTML代码

<div class="dialog">
   <div class="text"></div>
</div>

CSS代码

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -100px;
   margin-top: -100px;
}

效果跟上面的是一样的，有种像把人往右和往下拽，然后有拉回来对准的感觉，可以试试。
3. 第三种跟第一种差不多，只不过把 margin 换成了 transform 属性，代码如下：

HTML代码

<div class="dialog">
   <div class="text"></div>
</div>

CSS代码

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

效果依旧是一样的。有没发现代码很相似，只改了一句transform: translate(-50%,-50%);实际上这样就不用去知道已知元素的宽度了，直接用 transform 的 translate 来移动。
4. 第四种是 flex 布局，关于 flex 布局之前的博客文章也有做过简单的介绍，这里就不再赘述，忘记了的戳这篇 CSS布局之 flex 布局 ，如何实现呢，代码如下：

HTML代码

<div class="dialog">
   <div class="text"></div>
</div>

CSS代码

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   display: flex;
   justify-content: center;
   align-items: center;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
}

效果同见最上面的那张图，这次的代码不一样了，不一样在哪里呢？flex 布局针对的是父元素，可以看到，在父元素的 div 中写的居中代码，子元素不需要写什么，躺着居中就可以了，不过个人觉得 flex 布局真正用到的时候不止是实现这么简单的布局，它可以实现用更简洁的代码实现更多常见的布局。
5. 第五种是使用 table 布局，这种不推荐使用，主要上面有那么多种方法，没必要用到这种，具体原理是给父元素设置display:table，子元素设置display:table-cell，table-cell 相当于表格中的 ，再结合vertical-align: middle 即可。

HTML代码

<div class="dialog">
   <div class="text">
      <div class="son"></div>
   </div>
 </div>

CSS代码

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   display: table;
}
.text{
   background-color: #e8491d;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.son{
   background-color: #d0d6d9;
   display: inline-block;
   width: 200px;
   height: 200px;
}

效果如下，这个效果跟上面那张有些许不一样，仔细瞧瞧代码跟背景色。

内联文字的水平垂直居中

上面介绍的几种方法大多更偏向布局之类的水平垂直居中，接下来介绍一种让文字水平居中的方法。我们都知道，让文字水平居中，只需要一行 text-align: center 就可以搞定，那垂直居中呢？我从网上找到了解决方法，可以试试下面这样。

HTML代码

<div class="box">
   <div class="content">
        这个公众号是一个值得关注的号，不定期会分享一些有关前端类的文章，推荐大家关注，同时点赞转发分享到朋友圈，让更多的人看到。
   </div>
</div>

CSS代码

.box{
   width: 300px;
   line-height: 220px;
   background-color: #f4f4f4;
   margin: auto;
   font-family: 'Microsoft YaHei',sans-serif;
   font-size: 14px;
}
.content{
   display: inline-block;
   ine-height: 20px;
   margin: 0 20px;
   text-align: center;
   vertical-align: middle;
}

效果如下

总结

实现垂直居中的方法有很多，每一种都有各自的实现路径，但是兼容性却是各不相同，感兴趣的可以自己去测试下兼容。如果你有耐心从头看到这里，已经是很不错了，不过，看完可以敲一遍代码过一遍，可能记忆会来得更深刻些，希望这篇文章对你有帮助！