標籤：
本文將簡單敘述元素置中的基本方法。
代碼區：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>center</title> 6 7 </head> 8 <body> 9 <h1 style="text-align: center">Html中元素的水平置中方式</h1>10 <p style="text-align: center;">行內元素</p>11 <div style="margin: 0 auto; width: 200px; text-align: center;">定寬塊元素</div>12 <table align="center">13 <tr>14 <td>15 <div>不定寬塊元素，方法1</div>16 </td>17 </tr>18 </table>19 <div style="text-align: center;">20 <div style="display: inline-block;">不定寬塊元素，方法2</div>21 </div>22 <div style="height: 30px;">23 <div style="float: left; position: relative;left: 50%;">24 <div style="position: relative;left: -50%;">不定寬塊元素，方法3</div>25 </div>26 </div>27 </div>28 </html>
本文
一、需要進行水平置中的元素分類：
1，行內元素（不定寬）。
2，定寬塊元素。
3，不定寬塊元素。
二、基本置中方式：
1，行內元素：text-align：center；
2，定寬塊元素：margin：0 auto；
三、不定寬塊元素：
1.轉化為定寬塊元素：把元素封裝在table中；table元素會隨內容改變寬度，而其寬度值可以被擷取到，則可以把table看作為定寬的塊元素。
代碼實現：
<table style=“margin： 0 auto；”>
<tr>
<td>
<div>align-center</div>
</td>
</tr>
</table>
2.轉化為行內元素：把元素封裝在一個塊父元素中（寬度不影響）；把元素設定成行內元素，把父元素設定置中屬性（父元素中的子項目根據父元素的大小進行置中，而不是父元素進行置中）。
代碼實現：
<div class=“parent”style=“text-align:center;”>
<div style=”display:inline;”>align-center</div>
</div>
3.使用三層結構，position屬性：結構 great-parent>parent>div;great-parent為置中的參考體，parent向右位移50%（以great-parent為基準），div向左位移50%（以parent為基準）。
代碼實現：
<div class=“great-parent”>
<div class=“parent”
style=“float：left；//擷取內容區的寬；
position：relative；left：50%；”>
<div style=“position：relative；
left：-50%；”>align-center</div>
</div>
</div>
*思路：
great-parent參考體；parent父容器；div內容；
1.parent的寬度=div的寬度；
2.patent以great-parent的寬度為基值，向右位移50%；這時，parent和div的基準（左側臨界線）到達great-parent的中軸線；
3.div以parent的寬度為基值，向左位移50%；因為parent的寬度=div的寬度，所以div的中軸線和parent的基準以及great-parent的中軸線重合，到達div置中於great-parent的效果。
*痛點：float的作用；
由於未設定寬度值的塊元素，載入時會繼承父元素的寬度值，
一開始所有的元素的寬度值都等於great-parent的寬度；
當執行“float=left；”時，parent的寬度值會被重新賦值，
該值來自其內容的寬度；
parent中只有div，瀏覽器會計算div的大小，而div自身也沒有設定寬度值，則繼續計算div內部內容的大小，div內部有字元或者其他內容，div將計算這些內容的顯示大小；
然後，div把這個值往上逐級返回到瀏覽器，瀏覽器再把這個值賦給parent的寬度值。
最後，由於parent的寬度值被重新賦值，div就再次繼承parent的新的寬度值。parent的寬度=div的寬度=div內部內容的寬度。
html 元素水平置中方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
