水平居中分為塊狀元素和行內元素，而塊狀元素又分為定寬塊狀元素和不定寬塊狀元素。 1、行內元素水(display: inline)平居中（文字、圖片等）是通過給父元素設定 text-align：center；來實現的。

<p style="text-align: center;">行內元素水平居中</p>

2、定寬塊狀元素(dispaly: block)水平居中（塊狀元素的width是一個固定值），滿足塊狀和定寬兩個條件時，即可通過給自己設定“左右margin為auto”來實現。

<
 
div style="width: 200px; text-align: center; margin: 0 auto;">定寬塊狀元素水平居中</div>

3、不定寬塊狀元素水平居中 1) 改變塊狀元素的 dispaly 屬性為 inline， 然後給父級設定 text-aline：center 來實現水平居中， 這種方法的缺點是不能再給元素設定寬高了

<div style="text-align: center;">
       <div style
 
="display: inline;">不定寬塊狀元素水平居中</div>        
</div>

2) 利用絕對定位，讓元素向右偏移50%，然後再向左偏移自身的50%

<div style="position: absolute; left: 50%; transform: translateX(-50%);">不定寬塊狀元素水平居中</div>

3) 利用flex實現水平居中（一）

<
 
div style="display: flex;">
     <div style="margin: 20px auto;">不定寬塊狀元素水平居中</div>
</div>

4) 利用flex實現水平居中（二）CSS3的fit-content配合左右margin為auto實現水平居中方法

<div style="width: fit-content; margin-left: auto; margin-right: auto;">不定寬塊狀元素水平居中</div>