css 水平居中

1、text-align: center
行内元素实现在块级元素内部居中

<div class="outer">
    <p style='text-align: center;'>水平居中</p>
</div>

2、margin: 0 auto
块级元素两边margin值自动居中

<div class="outer">
        <div class="inner" style='margin:0 auto'></div>
</div>

3、display:flex
just-content：center
利用弹性布局flex设置子元素水平居中（父元素设置弹性布局）

<div class="outer" style="display: flex; justify-content: center;">
    <div class="inner"></div>
</div>