作為前端攻城師，在製作Web頁面時都有碰到CSS製作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要為大家總結了利用css設定元素垂直居中的解決方法，有了這些方法就用再愁啦，需要的朋友可以參考下。
前言
元素的垂直居中也是我們日常網頁佈局中經常會遇到的問題，本文主要給大家介紹了關於利用css設定元素垂直居中的解決方法，文中介紹了多種情況的多種解決方法，相信會對遇到這個問題的朋友們帶來一定的幫助，下面話不多說了，來一起看看詳細的介紹吧。
html代碼:
<p class="parent"> <p class="child">Text here</p> </p>
既然設定子元素的垂直居中,那就要知道父元素的高度,才能知道這所謂的中在哪,對吧?就像你想在一段距離的中間位置站住,那你首先需要知道這段距離有多長,你才能知道中間位置在哪.
注意,我所有的百分比高寬,都是建立在html,body {width: 100%;height: 100%;}這樣的設定的基礎之上的,如果你沒有這樣設定,.parent這個p的父元素又是body,body你又沒有設定寬高,你就可能看不到效果,.parent這個p的高寬比是相對於它的父元素的,所以你在使用的時候需要確定.parent這個p的父元素設定了寬度和高度的.
(1) 行內文本垂直居中
(1) 行內文本垂直居中
css程式碼:
.parent {
height: 100px;
border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
line-height: 100px;
}登入後複製
(2) 行內非文字垂直居中(以img為例)
:
<p class="parent">
<img src="image.png" alt="" />
</p>
(3) 未知高度的塊級元素垂直居中
html代碼:
.parent {
height: 100px;
border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
//注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
line-height: 100px;
}:
<p class="parent">
<p class="child">
<!--.child的高度未知,父元素要有高度-->
sddvsds dfvsdvds
</p>
</p>第二種方法(不使用transform):
.parent {
width: 100%;
height: 100%;
position: relative;
/*display: table;*/
}
.child {
width: 500px;
border: 1px solid #ccc; /*设置border是为了方便查看效果*/
position: absolute;
top: 50%;
transform: translateY(-50%);
}第三種方法(需要加裝填紙.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;
}登入後複製
第四種方法:
(使用display: table,此種方法也適用於行內文本元素的居中):
css碼:
css碼:
,這裡要考慮相容性奧!)
css 代碼:
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
.parent {
width: 100%;
height: 100%;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}以上是總結利用css設定元素垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
