无法版心居中的解决方案

今天在写代码时，发现了一个问题，某些元素无法使用 margin: 0 auto; 版心居中，查了相关资料后发现，该方法只对 设置了宽的块级元素、内联块级元素 有效，也就是说，一定要让它有个大小。 <span>、<ul> 等在默认样式下，均无法使用该方式进行版心居中，对此，我整理了一些解决方案。

✨ 1. 转为块级并设置宽

span {
    display: block;	 /* 或 inline-block */
    margin: 0 auto;
    width: 200px;
}

🐼 2. 父容器中设置水平文本居中

该种方法利用了 <span> 标签的“包裹性”（shrink-to-fit），可以做到文字绝对居中于网页，非常巧妙。

<div class="container">
    <span>水平居中</span>
</div>

.container {
    text-align: center;
}

🍄 3. 使用 FlexBox 布局

<div class="container">
    <span>水平居中</span>
</div>

.container {
    display: flex;
    justify-content: center;
}

---