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