水平垂直居中深刻挖掘

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

固然，CSS 中实现水平垂直居中的方式不少。别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利弊。

嗯哼？也就是：

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

本文将讨论 4 种水平垂直居中的方式，分别是，而且每一个起个名字方面下面看图：

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

 

居中单个元素

对于以下简单的结构：

<div class="g-container">
    <div class="sub"></div>
</div>

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

CodePen Demo -- Centering in CSS

 

居中多个元素

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

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>

那么若是是居中多个子元素，上述 4 种方法，就能体现出明显的不同。稍微也修改一会儿元素，不给它设定宽度，经过 padding 撑开便可：

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

看看结果如何：

CodePen Demo -- Centering in CSS 2

简单分析分析：

1. absolute 的方法明显有问题，因为用的绝对定位，其实 3 个子元素都叠在了一块儿
2. flex 和 grid 的方法，若是不手动添加边距(margin 或者 gap)，会贴在一块儿
3. 不限制方向的话，flex 默认是水平排列，grid 是竖直排列
4. 很是重要的一点，grid 布局下的子元素的宽度，全部子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度（也就是拉伸至网格宽度）

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

 

控制间距

若是咱们但愿控制每一个元素之间的间距呢？咱们给 autobot、flex、grid 的容器各自加上 gap: 5px，再看看：

.g-container{
    gap: 5px;
}

CodePen Demo -- Centering in CSS 3

1. margin: auto 因为须要均分剩余空间，因此表现并很差，没法按照咱们设想的 5px 宽度进行间隔

 

让元素多到溢出

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

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

CodePen Demo -- Centering in CSS 4

能够看到：

1. 很是重要的一点，因为没有了剩余空间，margin: auto 已经没法作到均匀分配，水平垂直居中了，而是一边贴着容器边，另一边溢出
2. flex 和 grid 都作到了即使超出容器空间，依然是水平垂直居中的

 

总结一下

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

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

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

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

 

最后

本文知识点比较细，也代表 CSS 虽然简单，可是不表明它容易。咱们平常工做中用到的不少属性其实还有不少细节能够挖掘深刻。

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

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

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