SOURCE

<h2>行内元素 inline</h2>
<div style="text-align:center">
    <span class="example">让父级的块级元素设置 text-align:center </span>
</div>

<h2>普通流 block</h2>
<div class="example box" style="margin:0 auto">
    需要给块级元素设定宽度后,加上margin:0 auto 属性
</div>

<h2>浮动元素</h2>
<div class="example box" style="float:left;position:relative;left:50%;transform:translateX(-50%)">
    需要给块级元素设定宽度后,加上left:50%;transform:translateX(-50%) 属性
</div>

.example{
    border: 2px solid skyblue;
    padding: 10px;
}
.box{
    width:300px;height:100px;
}