逃离 CSS 地狱的 7 种方法

1 和 #6 读作“text-image: center”，但这不是有效的 CSS。我知道 #1 指的是 text-align，但我不明白 #6 是什么意思……

6 应该有标题

有过这种事吗？哈哈

是的，我也是。

这里有 7 种使用 CSS 实现完全居中效果的方法。

1. text-align: center;

此操作仅适用于display: inline&display: inline-block元素。另请注意，此操作必须应用于父元素。

2. margin: 0 auto;

这仅适用于display: block元素。并且元素必须具有宽度。

您还可以指定margin-left: auto是否margin-right: auto需要在顶部或底部设置边距。

3. vertical-align: middle;

这只对display: inline&display: inline-block元素有效。

4. float: center;

哈哈（你不能将浮动元素居中。）

5. Centering absolute

当出现这种情况时，使用transform和50%坐标将绝对定位的元素居中。

6. Centering with flexbox

Flexbox 有很多不同的对齐类，它们总是应用于父元素。这里的对齐类将完全位于盒子的中央。

7. the one I forgot ;-)