本文將簡單敘述元素居中的基本方法。
代碼區：
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內部內容的寬度。