css 實現水平居中

轉載

原文地址：https://www.cnblogs.com/00feixi/p/10116877.html

水平居中分為塊狀元素和行內元素，而塊狀元素又分為定寬塊狀元素和不定寬塊狀元素。

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>