總結利用css設定元素垂直置中

作為前端攻城師，在製作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) 行內文本垂直置中

css代碼:

.parent {    height: 100px;    border: 1px solid #ccc; /*設定border是為了方便查看效果*/}.child {    line-height: 100px;}

(2) 行內非文本垂直置中(以img為例)

html代碼:

<p class="parent">    <img src="image.png" alt="" /></p>

css代碼

.parent {    height: 100px;    border: 1px solid #ccc; /*設定border是為了方便查看效果*/}.parent img {    //注意此時應該保證圖片自身的高度或者你設定的高度小於父元素的200px的行高,不然你看不出來置中的效果.    line-height: 100px;}

(3) 未知高度的區塊層級元素垂直置中

html代碼:

<p class="parent">  <p class="child">    <!--.child的高度未知,父元素要有高度-->    sddvsds dfvsdvds  </p></p>

第一種方法(不需要加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代碼:

<p class="parent">  <p class="child">    <!--.child的高度已知,父元素高度已知-->    sddvsds dfvsdvds  </p></p>

css代碼:

#parent {  height: 300px;}#child {  height: 40px;  margin-top: 130px; /*這個只為父元素的高度減去這個元素的高度除以二計算得到的*/  border: 1px solid #ccc;}