深入探究 css水平垂直居中

1. 前言
2. 居中单个元素
3. 居中多个元素
• 控制间距
• 让元素多到溢出
4. 总结一下
5. 结语

前言

CSS 中实现水平垂直居中的实现方式很多，相信小白也会罗列很多方法。当然，大家别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利与弊。

也就是：

• 那么多种水平垂直居中的方式，如果真的在业务中需要使用了，你脑海里第一时间会想到哪个？
• 不同的水平垂直居中方式，它们肯定存在差异，那么最显著的不同是什么？
• 有没有所谓的最完美的水平垂直居中？

接下来将讨论 4 种水平垂直居中的方式，搭配图文为大家讲解：

• absolute: position: absolute 配合 top:50%;left:50%;transform:translate(-50%, -50%)
• autobot: display:flex 配合 margin:auto
• flex: display:flex 配合 align-items:center、justify-content:center
• grid: display:grid 配合 place-content:center;

推荐阅读《CSS 中值得收藏的七种垂直居中方法》《CSS 如何实现不定宽高 div 水平垂直居中呢？》

居中单个元素

对于如下简单的结构：

<div >
    <div ></div>
</div>

居中单个元素而言，上述 4 种方法都很好，没有问题。

可以看到：

1. 非常重要的一点，由于没有了剩余空间，margin: auto 已经无法做到均匀分配，水平垂直居中了，而是一边贴着容器边，另外一边溢出
2. flex 和 grid 都做到了即便超出容器空间，依然是水平垂直居中的

总结一下

经由上述几个 DEMO 可以看出来，在目前比较常用的水平垂直居中方案当中。flex 方案应该是目前而言最优的选择，它能够在各种环境下都保持内部元素的水平垂直居中并且不改变子元素的某些特征：

1. 便捷的水平垂直居中单个元素
2. 便捷的水平垂直居中多个元素，无论是横向、竖向，亦或内容超出
3. 非常方便控制子元素之间的间距
4. 不会改变子元素的宽度

当然，美中不足的是，可能相对而言，要敲多几个字符。

而 margin: auto 和 grid 则或多或少有一些小问题。absolute 无法应付多个元素。

结语

本文知识点比较细，也表明 CSS 虽然简单，但是不代表它容易。我们日常工作中用到的很多属性其实还有很多细节可以挖掘深入。

比如，可以再比较下在书写方式 writing-mode 不同的场景下，上述水平垂直居中的方式的异同，等等。