基于绝对定位的解决方案

代码很容易理解：先把这个元素的左上角放在视口（或最近的、具有定位属性的祖先元素）的正中心，然后再利用负外边距把它向左、向上移动（移动距离相当于它自身宽高的一半）。借助强大的 calc() 函数，这段代码还可以省略两行声明。

这个方法最大的局限在于它 要求元素的宽高是固定的。

通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了！在这个例子中，答案来自 CSS 变形属性。当我们在 translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，这样我们就可以彻底解除对固定尺寸的依赖，该方案适用于固定尺寸以及不固定尺寸。

固定宽高：

不固定尺寸：

基于视口单位的解决方案

如果你只想把元素 相对于视口进行居中，可以试试此方案。

• vw 是与视口宽度相关的。1vw 表示视口宽度的 1%
• 1vh 表示视口高度的 1%
• 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh
• 当视口宽度小于高度时，1vmax 等于 1vw，否则等于 1vh

可以利用 margin 同时完成水平和垂直的居中，但是要时刻记住它的局限性（仅 相对于视口进行居中）

Flexbox

利用 flexbox，我们只需要写两行声明：先给这个待居中元素的父元素设置 display: flex，再给这个元素自身设置 margin: auto。请注意，当我们使用 flexbox 时，margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。

flexbox 另一个好处在于，它还可以将匿名元素（即没有被标签包裹的文本节点）垂直居中。