總結利用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) 行內文本垂直居中

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

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

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%);
}

第三種方法(需要加裝填紙

.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;
}

(4) 已知高度的塊級元素垂直居中

css程式碼:

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

以上就是我目前發現並親自測試可行的一些方法,應該還有其他的方法

以上是總結利用css設定元素垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！