討論下垂直水平居中的多種方案

寒江水Kevin發表於2019-04-01

前言

寫部落格主要是用來總結、鞏固知識點，加深自己對這個知識點的理解。同時希望能幫助到有需要的人。如有不正確的地方。可以在評論區指出。你們的支援。是我不斷進步的源泉。

本來想把這個知識點放在這篇部落格中講的,但是這裡涉及的內容還挺多的。於是就把它單獨拉出來寫了。

簡單說明一下

下面的內容使用到了flex的佈局方式。有關flex的詳細使用方法和相容性。這裡就不詳細講述了，可以看這篇文章

這裡討論的是子元素為塊級元素的水平垂直居中方案。其他行內元素的的方案可以看這大佬的文章16種方法實現水平居中垂直居中

寬高固定的元素如何進行垂直水平居中

1.使用絕對定位與負邊距實現

html:

 <div class="parent">
    <div class="child"></div>
 </div>
複製程式碼

css:

.parent {
      position: relative;
      width: 600px;
      height: 600px;
      margin: auto;
      border: 1px solid red;
    }

.child {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
複製程式碼

原理：這個的實現方法原理還是很好理解的。相對父元素定位，距上邊和左邊個一半，然後在減去子元素的一半。

2.絕對定位與margin:auto實現水平垂直居中

css:

.parent {
  position: relative;
  width: 600px;
  height: 600px;
  margin: auto;
  border: 1px solid red;
}

.child {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}
複製程式碼

原理：這個方法的實現原理看了張鑫旭大神的部落格自己還是一直半解的。如果有同學知道可以在評論區探討下。 實現原理看這裡

未知寬高的元素如何進行水平垂直居中

1.無所不能的css3來實現

css:

 .parent {
      position: relative;
      width: 600px;
      height: 600px;
      margin: auto;
      border: 1px solid red;
    }

.child {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
    
.method3 {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
複製程式碼

原理：這種方法的實現原理其實跟固定寬高的方法一是一樣的。但是他有一個有點就是不需要知道元素的寬高。主要是通過transform中translate偏移的百分比值是相對於自身大小的。所以就可以實現不知道寬高還是可以實現垂直水平居中。

2.flex實現水平垂直居中

css:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
    margin: auto;
    border: 1px solid red;
}

.child {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
複製程式碼

原理：通過justify-content和align-items兩個屬性來實現水平垂直居中，一個定義的是水平軸山上的對齊方式，另一個則定義的是垂直軸上的對齊方式。

詳細程式碼在這裡：github.com/Leo928/html…

以上部分內容參考自其它文章。可以點選連結檢視原文。

最後：如果講訴不當的地方。請在評論區指出。你們的支援，是我不斷進步的源泉。

參考資料

【前端攻略】最全面的水平垂直居中方案與flexbox佈局

小tip: margin:auto實現絕對定位元素的水平垂直居中

相關文章