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

前言

寫博客主要是用來總結、鞏固知識點，加深本身對這個知識點的理解。同時但願能幫助到有須要的人。若有不正確的地方。能夠在評論區指出。大家的支持。是我不斷進步的源泉。

原本想把這個知識點放在這篇博客中講的,可是這裏涉及的內容還挺多的。因而就把它單獨拉出來寫了。

簡單說明一下

下面的內容使用到了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實現絕對定位元素的水平垂直居中