HTML居中是網頁設計中常用的佈局方式，實作方法也比較簡單。本文將詳細介紹幾種實作HTML居中的方法和對應的程式碼實作。
一、水平居中
1.用text-align屬性實作水平居中
在父元素中設定text-align屬性為center，可以實現其內部元素水平居中。例如：
<div style="text-align:center;"> <p>这里是居中文本</p> </div>
這樣，內部的文字就會在父元素中水平居中顯示。
2.用margin屬性實作水平居中
在需要居中顯示的元素中加入margin屬性，設定左右margin值為auto，可以實現該元素水平居中。例如：
<div style="width:300px;margin:auto;"> <p>这里是居中文本</p> </div>
這樣，div元素就會在父元素中水平居中顯示。
3.用flexbox實作水平居中
在父元素中設定display屬性為flex和justify-content屬性為center，可以實現其內部元素水平居中。例如：
<div style="display:flex;justify-content:center;"> <p>这里是居中文本</p> </div>
這樣，內部的文字就會在父元素中水平居中顯示。
二、垂直居中
1.用vertical-align屬性實作垂直居中
在需要垂直置中的元素中加入display屬性為table-cell與vertical-align屬性為middle，可實現該元素垂直居中。例如：
<div style="display:table-cell;vertical-align:middle;"> <p>这里是居中文本</p> </div>
這樣，div元素就會在父元素中垂直居中顯示。
2.用flexbox實作垂直居中
在父元素中設定display屬性為flex、align-items屬性為center和height屬性為100%，可以實現其內部元素垂直居中。例如：
<div style="display:flex;align-items:center;height:100%;"> <p>这里是居中文本</p> </div>
這樣，內部的文字就會在父元素中垂直居中顯示。
三、水平和垂直居中
1.用text-align和vertical-align屬性實作水平和垂直居中
在父元素中設定text-align屬性為center和display屬性為table-cell，並在需要居中的元素中設定vertical-align屬性為middle，可以實現該元素同時水平和垂直居中。例如：
<div style="display:table-cell;text-align:center;vertical-align:middle;"> <p>这里是居中文本</p> </div>
這樣，div元素就會在父元素中水平和垂直居中顯示。
2.用flexbox實現水平和垂直居中
在父元素中設定display屬性為flex、align-items屬性為center、justify-content屬性為center和height屬性為100% ，可以實現內部元素同時水平和垂直居中。例如：
<div style="display:flex;align-items:center;justify-content:center;height:100%;"> <p>这里是居中文本</p> </div>
以上就是實作HTML水平和垂直居中的幾個具體方法和對應的程式碼實作。實際應用中，應視需要選擇合適的方法，使網頁佈局更加美觀實用。同時，應避免濫用內聯樣式，將樣式表統一管理，提升程式碼可讀性和維護性。
以上是html居中程式碼怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
