水平垂直居中深入挖掘

在上篇文章 -- 一行 CSS 代码的魅力的最后，提到了两种快速实现水平垂直居中的方式。

当然，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;

居中单个元素

对于如下简单的结构：

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

对于如下稍微复杂点的结构：


    1
    123
    123456

那么如果是居中多个子元素，上述 4 种方法，就能体现出明显的不一样。稍微也修改一下子元素，不给它设定宽度，通过 padding 撑开即可：

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}

看看结果如何：

简单分析分析：

对于多个子元素，absolute 方法明显不适用，接下来主要看剩余 3 个方法在一些细节上的差异。

如果我们希望控制每个元素之间的间距呢？我们给 autobot、flex、grid 的容器各自加上 gap: 5px，再看看：

.g-container{
    gap: 5px;
}

OK，接下来，我们让内容再多一点，多到溢出整个容器，看看有什么不一样。

再来一张竖直方向排列的：

可以看到：

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

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

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

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

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

好了，本文到此结束，希望对你有帮助 :)，想 Get 到最有意思的 CSS 资讯，千万不要错过我的 iCSS 公众号

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。