在 CSS 中实现元素水平和垂直居中的 4 种方法

1。使用负边距的绝对定位

使用负边距使子元素居中（相对于父元素（position：relative）），需要知道子元素的宽度和高度；将子位置设置为absolute绝对位置；并将左侧和顶部设置为 50%；加上负边距，左边距值是宽度的一半，同样，顶部边距值是高度的一半。

让我们了解一下，绝对定位的子元素是通过其自身的边界相对于父元素定位的。这个边界就是边缘。当我们将left和top设置为50%时，子元素的左边缘将远离父元素。元素的左边距为父元素上边距的 50%，上边距为 50%。其实此时我们可以知道子元素的左上角水平和垂直居中。当我们设置负边距时，我们知道这个子元素向右和向上移动了一半长度，实现了水平和垂直居中。当然，我们也可以这样理解。事实上，真正相对于父元素定位的点是子元素左上角的点。当我们设置负边距时，子元素的中心点会替换其左上角的点。如果希望子元素为 元素可以水平居中，也可以垂直居中。在这种情况下，只需将左侧和顶部设置为 50% 即可。代码如下：

2。绝对定位，margin:auto

使用绝对定位，并且 left:0;right:0;top:0;bottom:0;margin:auto

当我们是子元素时 left:0;right:0 ;顶部：0；底部：0；设置后，浏览器会将边界框重新分配给子元素。此时，子元素填满了其父元素的所有可用空间。当我们分配子元素时设置宽度或高度以防止子元素占用所有可用空间。浏览器将根据新的边界框加上 margin:auto 重新计算。因为它是绝对定位的并且在文档的正常流程之外，所以浏览器将提供一个 margin-left、margin-right 相等的值以及 margin-top 和 margin-bottom 相等的值将使元素块水平居中并垂直位于父元素中。代码如下：

3.Flex

Flex布局是灵活布局。只需设置父元素的三个属性（display、justify-content、align-items）即可。代码如下：

4.Transform

CSS3中新增transformation属性，代码如下：

Summary

1。使用负边距方法的优点是跨浏览器性能好，兼容IE6/IE7，缺点是不能自适应。您需要设置子元素的宽度和高度。不支持百分比，负边框值与 padding 以及是否定义了 box-size 相关：border-box。计算时必须根据不同的情况而定。

2。使用margin:auto方法可以支持跨浏览器支持和百分比支持，但是必须声明子元素的宽度或高度（至少一个，否则会占用父元素的全部空间）。

这两种绝对定位方式可以在子元素中设置overflow:auto，防止内容溢出。

3。使用flex或transform方法的优点是代码量少，不需要调整子元素的宽度和高度。内容可以通过子元素内的子元素任意扩展并优雅地溢出。不过flex IE8/IE9不支持，transform IE8不支持，属性需要写上浏览器厂商前缀。

4。 html结构如下：

5。实验结果如下：（实现了子元素的水平和垂直居中，并且可以观察到两幅图像以不同方式溢出）
绝对位置溢出（溢出：auto）：

Flex 或变换溢出：