前言
元素的垂直居中也是我們日常網頁布局中經常會遇到的問題，本文主要給大家介紹了關于利用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;
}
以上就是我目前發現并親自測試可行的一些方法,應該還有其他的方法
總結
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。