我的博客原文：https://wzb.me/posts/2019/10/28/css-centering.html

「居中」是进行布局时最常见的需求之一了。CSS 有多种居中的方式，在什么时候挑选适合的方案？是一个值得思考的问题。

法律声明

警告：本作品遵循 署名-非商业性使用-禁止演绎 4.0 未本地化版本（CC BY-NC-ND 4.0） 协议发布。你应该明白与本文有关的一切行为都应该遵循此协议。

这是什么？

写在前面

本文将会按照具体场景来选择相应的居中方式，帮助你系统地理清 CSS 居中。

注意：为了简洁，文中给出的 CSS 代码只会给出关键的定义布局的代码。

在水平方向上的居中（Horizontally Centering）

对于行内（inline / inline-* ）元素

要将行内元素居中，只需要给其父块级元素（block-level parent element）定义以下 CSS 规则：

.block-level-parent-of-inline-element {
  text-align: center;
}

这对 inline inline-block inline-table inline-flex etc. 都生效

text-align 不仅仅是针对于 text 的对齐描述，实际上，它影响的是块级元素下的行内元素与文本（inline contents）。

参考：text-align - CSS | MDN

对于块级元素（block element）

要将块级元素居中，给其定宽（width）之后定义以下 CSS 规则

.block-element {
  margin: 0 auto;
}

如果没有给定块级元素宽度？那它会充满整行，以至于不需要居中了...