水平且垂直居中方法（10種）

zgbgx 發布于2019-08-30 14:01 / 2162人閱讀

摘要：前言水平且垂直居中方法有哪些這在實際工作中經常用到，小記一下。以下結合水平居中強調實現垂直居中。子級元素是內聯元素，父級元素設置屬性垂直居中。

前言

水平且垂直居中方法有哪些？這在實際工作中經常用到，小記一下。

演示HTML結構

基本思想

一般的，水平居中相對垂直居中簡單很多，對于內聯元素（inline、inline-block、inline-table和inline-flex），父級元素設置text-align: center;；對于塊級元素，子級元素設置margin: 0 auto;。以下結合水平居中強調實現垂直居中。

1、已知父級元素寬高，父級元素定位非 static ，子級元素定位設為 position: absolute/fixed ，再利用 margin 、 left 和 top 屬性居中。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #ff00ff;
}

注：需要已知父級元素固定寬高，才能確定 margin-left 和 margin-right 。

2、子級元素是內聯元素，父級元素設置 line-height 屬性垂直居中。

#div1 {
  width: 200px;
  height: 200px;
  line-height: 120px;
  text-align: center;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  line-height: normal;
  text-align: left;
  display: inline-block;
  background-color: #ff00ff;
}

注：需要已知父級元素的固定高度，才可以確定line-height。

3、子級元素是內聯元素，父級元素用 display: table-cell; 和 vertical-align: middle; 屬性實現垂直居中。

#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，inline-block 、 table-cell 不兼容ie67

看到還有一種方案，是借助偽元素 ::after 將容器撐高，實現內聯元素垂直居中

#div1 {
  width: 200px;
  height: 200px;
  background-color: #ffff00;
  text-align: center;
}

#div1::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#div2 {
  width: 100px;
  display: inline-block;
  background-color: #cccccc;
  vertical-align: middle;
}

缺點：較難以理解，只適用于一個子級內聯元素（有多個子元素不適用）

4、對于子級是塊級元素，父級元素同樣用 display: table-cell; 和 vertical-align: middle; 屬性實現垂直居中，水平方向居中用 margin: 0 auto; 。

#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，table-cell不兼容ie67

5、利用css3 translate 特性：位移是基于元素寬高的。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，translate屬性兼容IE9+

6、當父級是浮動的，用 display: table-cell; 會失效，這時需要包三層，第一層 display: table;，第二層 display: table-cell; 第三次居中層

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  display: table;
  background-color: #ffff00;
  float: left;
}

#div2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  /* text-align: center; */
  background-color: #cccccc;
}

#div3 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  /* display: inline-block; */
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，但HTML標簽層數較多。

7、絕對定位加四邊定位為0，margin 為 auto。

#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: #cccccc;
}

注：無需要確定父級元素的寬高，但把定位屬性全用上了

8、利用flex布局 justify-content: center; 和 align-items: center; 屬性居中。

#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

注：無需要確定父級元素的寬高，兼容IE10+

9、利用grid布局，劃分成3x3柵格，第二行第二列格子垂直水平居中

#div1 {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: #ffff00;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
  grid-row-start: 2;
  grid-column-start: 2;
}

注：無需要確定父級元素的寬高，兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44

10、利用flex或grid布局結合 margin: auto;

#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  /* display: grid; */
}

#div2 {
  width: 100px;
  height: 100px;
  margin: auto;
}

注：此方法最簡潔，但是 flex/grid 存在兼容性問題

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

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

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

CSS元素（文本、圖片）水平垂直居中方法

摘要：上下左右負偽元素父容器上設置用于設置為行內元素的水平居中居中元素自身設置用于設置為塊級元素的水平居中元素寬度固定，且不能浮動絕對定位? 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

wuyangnju 2019-04-23 13:08 評論0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時實現水平和垂直居中。博客原文地址：Claiyre的個人博客 https://claiyre.github.io/如需轉載，請在文章開頭注明原文地址不為繁華易匠心從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為...

hiyayiji 2019-08-29 12:29 評論0 收藏0
常見面試題—css實現垂直水平居中

摘要：常見面試題實現垂直水平居中前言面試中常常被問到，如何使用來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。常見面試題—css實現垂直水平居中前言面試中常常被問到，如何使用css來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常...

gougoujiang 2019-08-29 15:40 評論0 收藏0
初探flex布局

摘要：一布局概述布局是一種較新盒子模型，在布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮其大小。下面我們來看用布局怎么解決這些問題。所以學會使用布局是非常有必要的。想詳細了解布局請點擊這里。一 flex布局 1.1 flex概述 flex布局是一種較新CSS盒子模型，在flex布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮...

Jeffrrey 2019-08-29 12:48 評論0 收藏0
cssfloat布局以及其他小技巧

摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯系方式對齊其他的方法直接用可以的，不過會受到字體的影響。字體一變，加的就會變。代碼解釋代碼如果是內聯元素要被改變寬度的話，一定要先寫上。 css float 布局以及其他小技巧總結這篇博文前面四個部分是關于css 經典布局如果你已經知道了可以直接跳過看第六部分 css 的其他小技巧 1.0 左右居中布局 ...

ISherry 2019-08-02 10:10 評論0 收藏0