在上篇文章 -- 一行 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;
居中单个元素
对于如下简单的结构：
<div> <div></div> </div>