在我水了11種水平垂直居中方法之后，我終于明白了

levius 發布于2019-08-29 18:40 / 941人閱讀

摘要：老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢基本根據如上結構，通過實現水平垂直居中。絕對定位利用父元素相對定位和子元素絕對定位進行水平垂直居中。

老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢？

基本HTML

根據如上結構，通過css實現水平垂直居中。

絕對定位

利用父元素相對定位和子元素絕對定位進行水平垂直居中。根據是否知道子元素寬高，使用數值或者百分比的方式進行定位。

方法1

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

通過設置四向為0和margin: auto實現。

方法2

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px -25px;
}

通過設置left和top使child左上角位置移動到中間，然后再移動自身寬高一般使child中心至中間。

方法3

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法4

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}

總結

這幾種方法使用了絕對定位，margin或者transform來使子元素水平垂直居中，根據是否知道具體寬高來使用margin或者transform。

彈性盒子 方法5

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}

方法6

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items:center;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
}

總結

這兩種使用了flex彈性盒子布局來實現，隨著瀏覽器兼容性的普及，彈性盒子也越來流行了。

table-cell 方法7

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: table-cell;
  text-align:center;
  vertical-align: middle;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
}

使用了table-cell以及行內塊元素來實現

行內元素 方法8

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
  vertical-align: middle;
}
.father:after{
  content:"";
  width:0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

利用偽元素撐開高度垂直居中。

方法9

.father {
  width: 100px;
  line-height: 100px;
  background-color: grey;
  text-align: center;
}
.child {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: red;
  vertical-align: middle;
}

利用父元素line-height與inline-block子元素vertical-align垂直居中

相對定位 方法10

是不是有點疑惑為啥1、2、3都要用absolute來定位，用relative不行嗎？

答案是可以的。

云服務器 GPU云服務器水平垂直居中我明白了我終于不要在我離開之前離開

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

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

使一個div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Taste 2019-08-30 14:13 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Labradors 2019-08-02 16:01 評論0 收藏0
CSS的居中方式

摘要：這樣一來外部容器正好可以將內容垂直的包裹住并且由于外部容器是浮動的所以容器的寬度和內層的寬度一致這樣可以做到完全自適應的實現居中。剛學習CSS的時候嘗試過幾種居中的方法,這些方法不需要借助JS手段,所寫的方法有一個原則,就是在不需要直接人為的設定好寬高計算后再實現居中,還有諸如table布局啊、行高設定、margin：auto之類的我就不寫了。以下幾種方法針對不同的瀏覽器,經過測...

lushan 2019-08-29 12:28 評論0 收藏0
不定元素寬高用css實現內容水平和垂直都居中

摘要：在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。這篇文章就來總結一下都有哪些方法可以實現水平和垂直都居中。表示這些元素將相對于本容器水平居中，也是同樣的道理垂直居中。在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說，我們不...

Chao 2019-08-30 15:52 評論0 收藏0