居中是我们最常用的布局方式

#方法1
#父元素指定height和width 子元素margin:0 auto; text-align:center;
<div style="height:100px;width100px">
    <div style="margin:0px auto;text-align:center">这是水平居中方式一</div>
</div>
#方法2
#父元素display:flex;flex-direction:column; 子元素align-self:center;
<div style="display:flex;flex-direction:column">
    <div style="align-self:center">这是水平居中方式二</div>
</div>
#方法3
#父元素display:inline-block; 子元素margin:0 auto;text-align:center;
<div style="display：inline-block">
    <div style="margin:0 auto;text-align；center;">这是水平居中</div>
</div>
#方法4
#设置隐藏浮动块不用clear

#方法5
#display: table-cell;text-align: center;
<div style="display:table">
    <div style="display:table-cell;text-align:center;">这是水平居中方式</div>
</div>
#方法6
#如果知道固定的宽度，可以通过设置margin-left实现这个效果
<div style="width:200px">
<div style="width:100px;margin-left:50px;">这是水平居中方式</div>
</div>