[size=3]利用(yòng)CSS讓元(yuán)素垂(chuí)直(zhí)居中(zhōng)是個(gè)很(hěn)頭(tóu)疼的問題，這(zhè)裏(lǐ)就介紹兩(liǎng)種簡單(dān)實用的方法
[/size]
[size=4]方法一(yī)：利(lì)用行(háng)高(gāo)（line-height）定(dìng)位(wèi)[/size]
line-height通常(cháng)是(shì)用(yòng)於(yú)調節(jié)一段文字(zì)的行(háng)與(yǔ)行之間的(dí)距離，或者說兩行文(wén)字之間的距離，如果行(háng)高是500px，那(nà)麼每一(yī)行中的(dí)文字距(jù)離本行的頂(dǐng)部就是(shì)250px，如果將文(wén)字的行(háng)高(gāo)設為500px，並(bìng)且外麵(miàn)的容(róng)器的高(gāo)度也(yě)為500px，同樣可(kě)以實現(xiàn)垂直居中(zhōng)，但是(shì)用它(tā)來(lái)實現垂(chuí)直居中，也是(shì)有(yǒu)缺(quē)點的，就(jiù)是如果內容過(guò)多，文字(zì)就會跑到(dào)下一(yī)行，那麼(mó)內容就不(bù)可(kě)能(néng)垂直(zhí)居(jū)中(zhōng)了。
HTML代碼：
<h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1>
CSS代碼(mǎ)：
body {
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font: 3em Georgia, "Times New Roman", Times, serif;
color: #fff;
height: 500px;
line-height: 500px;
text-align:center;
border: 10px solid #999;
}
h1 span {
font-weight: bold;
font-size:1.5em;
color: #fff000;
}
p {
font-size: 1.3em;
color: #999;
}
strong {
color: #fff;
}
[size=4]方法(fǎ)二(èr)：利(lì)用(yòng)絕(jué)對定位
[/size]
先(xiān)來(lái)看看效果，查(chá)看演示(shì)
這個(gè)方(fāng)法有(yǒu)個缺點(diǎn)我(wǒ)必須(xū)指出(chū)，就(jiù)是外麵的(dí)塊(kuài)狀(zhuàng)元(yuán)素，必須指定高度，所以(yǐ)如果(guǒ)你(nǐ)在裏(lǐ)麵放動態(tài)的(dí)內(nèi)容(róng)的話，後果會(huì)很(hěn)糟(zāo)糕滴~
HTML代(dài)碼：
<div class="vert">
<h1>Hi, I'm<span>Vertically Aligned</span></h1>
<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
</div>
CSS代碼(mǎ)：
這種(zhǒng)用絕(jué)對定位來(lái)實現(xiàn)的垂(chuí)直(zhí)居中，取決與元素(sù)的寬度和高度，你(nǐ)可(kě)以用(yòng)下(xià)麵這(zhè)兩個(gè)公(gōng)式來(lái)計算元(yuán)素(sù)的左(zuǒ)邊距和上(shàng)邊距
元(yuán)素(sù)的(dí)寬(kuān)度/2 = 負左(zuǒ)邊距
元(yuán)素的高(gāo)度(dù)/2 = 負上邊距
在(zài)這個(gè)例子中(zhōng)，我們就是這(zhè)麼計(jì)算的(dí)
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
完(wán)整(zhěng)CSS代碼(mǎ)
body {
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font: 4em Georgia, "Times New Roman", Times, serif;
color: #fff;
border-bottom: 5px dotted #999;
margin: 0;
padding: 0 0 10px;
}
h1 span {
font-weight: bold;
display:block;
font-size:1.5em;
color: #fff000;
}
p {
font-size: 1.3em;
color: #999;
}
strong {
color: #fff;
}
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
[size=4]問(wèn)題(tí)延伸
[/size]
如果(guǒ)元素(sù)的(dí)外麵(miàn)還有一(yī)個父級元(yuán)素(sù)，如果才能(néng)讓元素(sù)垂直(zhí)居中於(yú)父級(jí)元素內(nèi)部(bù)？比(bǐ)如下麵(miàn)的(dí)代碼，多了(liǎo)一個父級元素(sù)
<div class="container">
<div class="vert">
<h1>Hi, I'm Nested &<span>Vertically Aligned</span></h1>
<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
</div>
</div>
這(zhè)時候，就必須在定義(yì)父級元素(sù)的(dí)CSS代碼中加入(rù)position: relative;才能夠(gòu)使內部元(yuán)素(sù)垂直居中於父級內(nèi)部，代(dài)碼如下：
.container {
position: relative;
height: 500px;
width: 800px;
border: 10px solid #999;
background: #000;
margin: 20px;
}
轉載請保留原文地址: https://antelcom.cn/show-466.html