本篇文章給大家帶來的內容是關于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>聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
