本篇文章給大家帶來的內容是關于html中居中設置方法介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

水平居中

實際開發過程中我們會遇到很多需要元素水平居中的情況，例如文章標題等。這里常見的水平居中情況有行內元素和塊級元素兩種，塊級元素又分為定寬塊級元素和不定寬塊級元素兩種情況。定寬塊級元素顧名思義就是塊級元素的width是個固定的值；那么不定寬塊級元素我們就知道是塊級元素的width不是個定值的情況。

行內元素

當被設置的元素是文本、圖片等行內元素的時候，我們是通過給父元素設置 text-align:center 來實現的。

 body  div >
由上述代碼可知 這是一個在父元素中的居中元素 這段文字的父元素的CSSyangshi_10628_1.html' target='_blank'>CSS樣式增加了 text-align:center；屬性，所以文本展示居中。但是當被設置元素為塊級元素時候這種方式就不太適用了，塊級元素的情況又分為定寬塊級元素和不定寬塊級元素兩種。
定寬塊級元素
滿足定寬塊級元素 定寬 和 塊級元素 兩個條件是可以通過設置左右margin的值為auto來實現居中。
 body  div 水平居中的定寬塊級元素 /div  /body  style  div{ border:1px solid blue; width:100px; /*寬度設置固定值*/ margin:10px auto; /style /*或者也可以寫成 margin-left:auto; margin-right:auto;*//* 元素的上下margin屬性可以照常設置，不受影響 */
不定寬塊級元素
不定寬塊級元素的居中方法有三種：第一種是加入table標簽；第二種是設置display:inline方法，與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置；第三種方法是設置position:relative和left:50%，利用相對定位的方式，將元素向左偏移50%用以實現居中的目的。
加入table標簽
加入table標簽是利用table標簽的長度自適應性（不定義其長度也不默認父元素body的長度，table長度是根據內文本長度決定的），因此可以看作一個定寬塊級元素，然后再利用定寬塊級元素居中的margin方式使其水平居中。
使用的方式第一步為需要設置居中的元素外面加一個table標簽，然后為這個table設置 左右margin居中 
 div  table  tbody  tr td  li 鋤禾日當午 /li  li 汗滴禾下土 /li  li 誰知盤中餐 /li  li 粒粒皆辛苦 /li  /ul  /td /tr  /tbody  /table  /div  style  table{ border:1px solid; margin:0 auto; /style 
設置display:inline方法
改變塊級元素的display為inline類型，設置為行內元素顯示，然后使用 text-align:center來實現居中顯示。這種方法相較于設置table方式的優勢是不用增加無語義標簽，但是這種方式也存在一定的問題，就是它將塊狀元素的display改為inline，元素變為行內元素后會少了一些功能使用。
 body  div >
設置position:relative和left:50%
通過給父元素設置float，然后設置position:relative和left:50%，子元素設置position:relative和left:50%來實現水平居中。
 body  div >
垂直居中
垂直居中分為兩種情況分別是父元素高度確定的單行文本和父元素高度確定的多行文本。
父元素高度確定的單行文本
父元素高度確定的單行文本豎直居中的方法是通過 設置父元素的height和line-height高度一致來實現的。height是該元素的高度，line-height是行高，也就是行間距，是行與行之間的基線間的距離。line-height與font-size的計算值之差分為兩半(在CSS中稱為 行間距 )，分別加到一個文本行內容的頂部和底部?？梢园@些內容的最小框就是行框。這種文字行高與塊高一致帶來了一個弊端，就是當文字內容的長度大于塊的寬度的時候，就會有內容脫離了塊。
 div >
父元素高度確定的多行文本
父元素高度確定的多行文本、圖片等豎直居中有兩種方式，第一種是插入table標簽，然后設置vertical-align:middle。CSS中有一個用于豎直居中的屬性vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。
/* 方式一 */ body  table tbody tr td >
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式。
隱性改變display類型
在我們開發過程中當為元素設置 position:absolute 或者 float:left 屬性的時候，元素的顯示類型就會自動變為以display:inline_block (塊級元素)的方式顯示，可以設置元素的width和height。
 div >
相關推薦：
css html元素居中與html元素內容居中的區別
html的元素水平垂直居中應該怎么設置
以上就是html中居中設置方法介紹（代碼）的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。