本文将讨论 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 种方法都很好，没有问题。

居中多个元素

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

<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;
}

看看结果如何：

简单分析分析：

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

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

控制间距

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

flex 布局从 chrome84 开始，也支持使用 gap 进行子元素的间距控制

.g-container{
    gap: 5px;
}

1. margin: auto 由于需要均分剩余空间，所以表现并不好，无法按照我们设想的 5px 宽度进行间隔

让元素多到溢出

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

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

可以看到：

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

总结一下

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

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

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

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