前言
元素的垂直居中也是我們?nèi)粘＞W(wǎng)頁(yè)布局中經(jīng)常會(huì)遇到的問(wèn)題，本文主要給大家介紹了關(guān)于利用css設(shè)置元素垂直居中的解決方法，文中介紹了多種情況的多種解決方法，相信會(huì)對(duì)遇到這個(gè)問(wèn)題的朋友們帶來(lái)一定的幫助，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
html代碼:
<div class="parent"><div class="child">Text here</div></div>
既然設(shè)置子元素的垂直居中,那就要知道父元素的高度,才能知道這所謂的中在哪,對(duì)吧?就像你想在一段距離的中間位置站住,那你首先需要知道這段距離有多長(zhǎng),你才能知道中間位置在哪.
注意,我所有的百分比高寬,都是建立在html,body {width: 100%;height: 100%;}這樣的設(shè)置的基礎(chǔ)之上的,如果你沒(méi)有這樣設(shè)置,.parent這個(gè)div的父元素又是body,body你又沒(méi)有設(shè)置寬高,你就可能看不到效果,.parent這個(gè)div的高寬比是相對(duì)于它的父元素的,所以你在使用的時(shí)候需要確定.parent這個(gè)div的父元素設(shè)置了寬度和高度的.
(1) 行內(nèi)文本垂直居中
css代碼:
.parent { height: 100px; border: 1px solid #ccc; /*設(shè)置border是為了方便查看效果*/}.child { line-height: 100px;}(2) 行內(nèi)非文本垂直居中(以img為例)
html代碼:
<div class="parent"> <img src="image.png" height: 100px; border: 1px solid #ccc; /*設(shè)置border是為了方便查看效果*/}.parent img { //注意此時(shí)應(yīng)該保證圖片自身的高度或者你設(shè)置的高度小于父元素的200px的行高,不然你看不出來(lái)居中的效果. line-height: 100px;} (3) 未知高度的塊級(jí)元素垂直居中
html代碼:
<div class="parent"> <div class="child"> <!--.child的高度未知,父元素要有高度--> sddvsds dfvsdvds </div></div>
第一種方法(不需要加padding):
css代碼:
.parent { width: 100%; height: 100%; position: relative; /*display: table;*/}.child { width: 500px; border: 1px solid #ccc; /*設(shè)置border是為了方便查看效果*/ position: absolute; top: 50%; transform: translateY(-50%);} 第二種方法(不使用transform):
css代碼:
.parent { position: relative; width: 100%; height: 100%;}.child { width: 500px; border: 1px solid #ccc; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 30%; margin: auto;} 第三種方法(需要加padding):
css代碼:
#parent { padding: 5% 0;}#child { padding: 10% 0;} 第四種方法:
(使用display: table,此種方法也適用于行內(nèi)文本元素的居中):
css代碼:
.parent { width: 100%; height: 100%; display: table;}.child { display: table-cell; vertical-align: middle;} 第五種方法(flex布局,這里需要考慮兼容性?shī)W!)
css 代碼:
.parent { width: 100%; height: 100%; /*這里一定要寫(xiě)高度奧!*/ display: flex; align-items: center; justify-content: center; } (4) 已知高度的塊級(jí)元素垂直居中
html代碼:
<div class="parent"> <div class="child"> <!--.child的高度已知,父元素高度已知--> sddvsds dfvsdvds </div></div>
css代碼:
#parent { height: 300px;}#child { height: 40px; margin-top: 130px; /*這個(gè)只為父元素的高度減去這個(gè)元素的高度除以二計(jì)算得到的*/ border: 1px solid #ccc;}以上就是我目前發(fā)現(xiàn)并親自測(cè)試可行的一些方法,應(yīng)該還有其他的方法
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)VeVb武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
