本篇文章給大家帶來的內容是關於html中置中設定方法介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
水平置中
實際開發過程中我們會遇到很多需要元素水平置中的情況，例如文章標題等。這裡常見的水平置中情況有行內元素和區塊層級元素兩種，區塊層級元素又分為定寬區塊層級元素和不定寬區塊層級元素兩種情況。定寬區塊層級元素顧名思義就是區塊層級元素的width是個固定的值；那麼不定寬區塊層級元素我們就知道是區塊層級元素的width不是個定值的情況。
行內元素
當被設定的元素是文本、圖片等行內元素的時候，我們是通過給父元素設定 text-align:center 來實現的。
<body> <div class="textCenter">這是一個在父元素中置中元素</div></body><style> textCenter{ text-align:center; }</style>
由上述代碼可知"這是一個在父元素中的置中元素"這段文字的父元素的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> <ul> <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 class="container"> <ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul> </div></body> <style>.container{ text_align:center;}.container ul{ list-style:none; margin:0; padding:0; display:inline;} .container li{margin-right:10px;display:inline;}</style>
設定position:relative和left:50%
通過給父元素設定float，然後設定position:relative和left:50%，子項目設定position:relative和left:50%來實現水平置中。
<body><div class="container"> <ul> <li><a href=""#>First</a></li> <li><a href=""#>Second</a></li> <li><a href=""#>Third</a></li> <li><a href=""#>Fourth</a></li> </ul></div></body> <style>.container{ float:left; position:relative; left:50%;} .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%} .container li{ float:left; display:inline; margin-right:8px}</style>
垂直置中
垂直置中分為兩種情況分別是父元素高度確定的單行文本和父元素高度確定的多行文本。
父元素高度確定的單行文本
父元素高度確定的單行文本豎直置中的方法是通過 設定父元素的height和line-height高度一致來實現的。height是該元素的高度，line-height是行高，也就是行間距，是行與行之間的基準間的距離。line-height與font-size的計算值之差分為兩半(在CSS中稱為"行間距")，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。這種文字行高與塊高一致帶來了一個弊端，就是當文字內容的長度大於塊的寬度的時候，就會有內容脫離了塊。
<div class="container"> hello,world!</div> <style>.container{ height:10px; line-height:10px;}</style>
父元素高度確定的多行文本
父元素高度確定的多行文本、圖片等豎直置中有兩種方式，第一種是插入table標籤，然後設定vertical-align:middle。CSS中有一個用於豎直置中的屬性vertical-align，在父元素設定此樣式時，會對inline-block類型的子項目都有用。
/* 方式一 */<body><table><tbody><tr><td class="wrap"><div> <p>置中一下</p></div></td></tr></tbody></table></body> <style>table td{ height:500px; background:#ccc;}</style> /* 方式二 */<div class="container"> <div> <p>置中一下下</p> <p>置中一下下</p> <p>置中一下下</p> <p>置中一下下</p> <p>置中一下下</p> </div></div><style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設定區塊層級元素的 display 為 table-cell，啟用 vertical-align 屬性，但注意 IE6、7 並不支援這個樣式。
隱性改變display類型
在我們開發過程中當為元素設定 position:absolute 或者 float:left 屬性的時候，元素的顯示類型就會自動變為以display:inline_block (區塊層級元素)的方式顯示，可以設定元素的width和height。
<div class="container"> <a href="#" title="">點這裡看看</a></div><style>.container a{ position；absolute; width:200px; background:#ccc;}</style>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
