HTML元素水平垂直居中實現方式（天天一個知識點）

在前端頁面開發中，HTML元素水平垂直居中是須要常常處理的問題，今天咱們就來系統的學習一下如何在HTML實現水平垂直居中，經過對主流水平垂直居中實現方式的實踐，來找到適合特定狀況下的佈局實現方式，並逐步達到靈活運用的水平。

水平居中

方式一： text-aligin:center(僅限行內元素)

text-align屬性定義行內元素（例如文字）如何相對它的塊父元素對齊。當其值爲center時能夠領行內元素居中對齊。

<style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: orange;
      text-align: center;

    }
</style>

<div class="box1">
  一段用於演示的文字
</div>

方式二：margin:0 auto

margin用來設置一個塊元素的偏移量，其值有四個參數，分別表明：上、右、下、左四個方向的偏移量（順時針）。其值能夠簡寫爲兩個，第一個值表明上下兩側的偏移量，第二個值表明左右兩側的偏移量，當咱們給左右兩側的偏移量設置爲auto時，表明咱們讓瀏覽器本身選擇一個合適的偏移量，這樣就能實現左右水平居中。

<style>
.box2{
      width: 75%;
      background-color: lime;
      margin:0 auto;
    }
</style>
 <div class="box2"> 
     一段用於演示的文字
 </div>

方式三：基於relative佈局實現水平居中

咱們能夠經過將一個元素設置爲浮動元素，而後將其定位設置爲relative，將其子元素的定位也設置爲relative。而後將父元素的left值設置爲50%，將其向右移動50%的距離，接着咱們給子元素設定left值爲-50%使其向反向向移動自身位置的50%，這樣一樣能夠實現居中效果。

<style>
  .box3 {
      float: left;
      position: relative;
      left: 50%;
    }

    .box4 {
      position: relative;
      left: -50%;
    }

</style>

<div class="box3">
    <div class="box4">
      一段用於演示的文字
    </div>
</div>

方式四：基於Flex實現水平居中（移動端首選）

基於flex實現水平居中很簡單，只須要將justify-content屬性設定爲center便可。因爲flex是一個響應式佈局，是移動端跨端頁面開發的首選，所以很是建議移動端開發的小夥伴以這種方式實現水平佈局。

<div class="box5">
  一段用於演示的文字
</div>
  
.box5{
   display: flex;
   justify-content: center;
}

方式五：父元素開啓相對定位，子元素開啓絕對定位

咱們還能夠經過給父元素開啓相對定位，並給子元素開啓絕對定位，來實現水平居中，具體實現方式以下：

<div class="box6">
  <div class="box7">
    一段用於演示的文字
  </div>
</div>
  
.box6{
  position: relative;
}
.box7{
  width: 80%;
  position: absolute;
  background-color: pink;
  left:0;
  right: 0;
  margin:0 auto;
}

垂直居中

方式一：單行文字實現水平居中

單行文字實現水平居中是咱們在前端頁面開發中經常遇到的一種狀況，這種狀況比較特殊，這裏咱們首先介紹。在一個塊元素中，若是隻有一行文字，咱們只需將line-height參數設置爲與當前容器的高度一致便可，代碼以下：

<div class="box1">
    一段用於演示的文字
</div>
<style>
.box1{
      height: 80px;
      line-height: 80px;
}
</style>

方式二：基於Flex實現垂直居中

基於flex實現垂直居中一樣很簡單的，只須要設置align-items:center便可，代碼以下：

<div class="box1">
    <div class="boxinner1">
    </div>
  </div>
<style>
    .box1 {
      display: flex;
      width: 100%;
      height: 800px;
      background-color: lightskyblue;
      /* 設置元素垂直排列 */
      align-items: center;
    }

    .boxinner1 {
      height: 100px;
      width: 100px;
      background-color: gray;
    }
  </style>

方式三：基於Table佈局模式

咱們能夠將父元素的display屬性設置爲table，而後將子元素的display設置爲table-cell,而後設置vertical-align:middle;來實現子元素的垂直佈局。

<div class="outer">
    <div class="inner">
      一段用於演示的文字
  </div>
</div>
<style>
    .outer {
      width: 100%;
      height: 100px;
      display: table;
    }
    .inner {
      display: table-cell;
      vertical-align: middle;
    }
  </style>

這種垂直方向實現居中的缺陷在於父元素須要指定寬度。

方式四：absolute定位+transform

咱們能夠將父元素的position屬性設置爲relative，而後將子元素的屬性設置爲absolute，子元素就會相對於父元素進行定位，而後咱們將子元素的top屬性設置爲50%，這時候子元素相對於父元素頂部的距離爲父元素高度的50%，而後咱們還須要將元素自己向上移動自身高度的50%，咱們可使用transform實現。

<div class="outer">
    <div class="inner">
      一段用於演示的文字
    </div>
  </div>
  
<style>
    .outer {
      height: 100px;
      position: relative;
      background-color: lime;
    }
    .inner {
      position: absolute;
      top:50%;
      transform: translate(0,-50%) ;
    }
  </style>

實現水平垂直居中的方式有不少，每一個實現的方式都有本身的缺點或有點，好比咱們將元素設置爲浮動時會遇到高度塌陷的問題，而使用flex佈局則會在老的IE瀏覽器存在兼容性問題。所以咱們須要根據咱們的使用場景靈活選擇，爭取找到實現方式中的最優解！