版心居中的解决方案

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

1. 给定具体宽度

不推荐，因为会破坏块级元素（block-level，包括 block、list-item 等）的流体布局以及内联级元素（inline-level，包括 inline、inline-block 等）的“包裹性”。

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;
}