css設置垂直居中

he_xd 發布于2019-08-29 13:18 / 2522人閱讀

摘要：設置垂直居中元素的垂直居中也是我們日常網頁布局中經常會遇到的問題所以我在此提供一些解決方法希望可以給予有需要的人一些借鑒和參考代碼既然設置子元素的垂直居中那就要知道父元素的高度才能知道這所謂的中在哪對吧就像你想在一段距離的中間位置站住那你首

css設置垂直居中

元素的垂直居中也是我們日常網頁布局中經常會遇到的問題,所以我在此提供一些解決方法,希望可以給予有需要的人一些借鑒和參考.

html代碼:


Text here

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

css代碼

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

(3) 未知高度的塊級元素垂直居中
html代碼:


  
    
    sddvsds dfvsdvds

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


  
    
    sddvsds dfvsdvds

css代碼:

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

以上就是我目前發現并親自測試可行的一些方法,應該還有其他的方法,如果你們有更好用的方法,歡迎私信或者留言給我,我們的目的都是一樣的,幫助有需要的人,共同進步!如有錯誤,歡迎批評指正!
如果覺得這篇文章對你有用,歡迎點贊和收藏奧!

GPU云服務器云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112510.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0
CSS/CSS3 實現居中（水平&垂直）

摘要：，水平居中行內元素把行內元素放在一個屬性塊元素中，然后設置父層元素屬性居中，水平居中塊狀元素設置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設置父層元素屬性居中，水平居中多個塊狀元素布局實現把塊狀元素的父元素屬性和，如下設置， 1，水平居中：行內元素把行內元素放在一個屬性塊（display：block）元素中，然后設置父層元素屬性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 評論0 收藏0
CSS/CSS3 實現居中（水平&垂直）

摘要：，水平居中行內元素把行內元素放在一個屬性塊元素中，然后設置父層元素屬性居中，水平居中塊狀元素設置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設置父層元素屬性居中，水平居中多個塊狀元素布局實現把塊狀元素的父元素屬性和，如下設置， 1，水平居中：行內元素把行內元素放在一個屬性塊（display：block）元素中，然后設置父層元素屬性居中： .test { text-align:ce...

levy9527 2019-08-30 11:20 評論0 收藏0