前言
 

元素的垂直居中也是我們日常網頁布局中經常會遇到的問題，本文主要給大家介紹了關于利用css設置元素垂直居中的解決方法，文中介紹了多種情況的多種解決方法，相信會對遇到這個問題的朋友們帶來一定的幫助，下面話不多說了，來一起看看詳細的介紹吧。

html代碼:

<div class="parent">
<div class="child">Text here</div>
</div>

既然設置子元素的垂直居中,那就要知道父元素的高度,才能知道這所謂的中在哪,對吧?就像你想在一段距離的中間位置站住,那你首先需要知道這段距離有多長,你才能知道中間位置在哪.
注意,我所有的百分比高寬,都是建立在

html,body {width: 100%;height: 100%;}

(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):