内容居中

<style>
    div{
        border: 1px solid lightgray;
        margin: 10px;
    }
</style>
<div align="center"> 通过设置属性align="center" 居中的内容</div>
<div style="text-align: center;">通过样式style="text-align:center" 居中的内容</div>

Bua260.png

元素居中

<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
<div style="width: 300px;margin: 0 auto;">设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
<span style="width: 300; margin: 0 auto;">
span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
</span>
<div style="text-align: center;">
    <span> span的居中可以通过放置在div种，然后让div text-align实现居中</text-alig>
    </span>
</div>

Bu0qcn.png