之前我們就總結過很多劇中的方法，但是時間長不用，就會慢慢遺忘，所以我們從頭來複習一次，變想邊敲程式碼……

文字居中

height + line-height：兩者配合使用，垂直方向居中
text-align：父級的text-align，水平方向居中
注意：text-align：center ；只是將子元素裡的內聯元素居中
如果不是內聯元素就要用到 margin： 0 auto；

寫個簡單的程式碼來理解

<style>
  .word{
    width: 100px;
    height: 30px;
    background: #E5E5E5;
    text-align
 
: center;
    line-height: 30px;
    font-size: 14px;
    }
</style>

<div class="word">
    <p>優秀</p>
</div>

優秀這兩個字在div中妥妥居中。

水平居中

水平居中分兩種情況

one：定寬塊元素水平居中
定寬 + 塊元素
來看看具體的程式碼

.wrap{width:200px;
     height:200px;
     border:1px solid red;
     margin:0 auto;} //寬度必須給值
 

<div class="wrap"></div>

two：不定寬塊元素水平居中

1.改變為行內元素,然後使用text-align:center處理,多用於不定項導航的ul的居中

.nav{text-align:center;}
.nav ul{display:inline;}
<div class="nav">
    <ul>
        <li>1111111</li>
        <li>2222222</li>
    </ul>
</div>

2.父元素浮動left：50%;
同時要設定position:relative（給子元素相對定位一個參考）
子元素相對定位position：relative；left：-50%；

.wrap{position:relative;
     left:50%;
     float:left;}
.box{position:relative; 
     left:-50%;}
<div class="wrap">
    <div class="box">一個子級盒子</div>
<div>

垂直居中

垂直居中也分兩種情況
one：塊級元素垂直居中，子元素知道具體寬高
設定top:50%，這個塊元素的最上邊為垂直居中的位置，但是這樣整體的內容並不是垂直居中，所以要設定margin-top: -2/父寬 px; //為高度的一半
這樣這個塊元素又相對於自身最上面向上又移動了自身的50%，因此就垂直居中了。

.wrap {
  //父元素
}
.wrap .content {
  position: absolute;
  width: 100px;
  heigth: 100px;
  top: 50%;
  margin-top: -50px; //為高度的一半
}

* two：子元素不知道具體寬高 *

這種情況有三種方法

第一種藉助table佈局；
第二種是藉助translate的transform屬性:

.wrap {
  position: relative;
}
.wrap .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

第三種就是用flex佈局，非常的簡單,程式碼如下:

.wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

萬能居中方法

首先移動子元素高度(寬度)的一半：left：50%;(top:50%;)
再移動父元素高度(寬度)的一半：margin-left:-寬/2;(margin-top:-高/2;）
前提是必須要知道子元素的寬高

.wrap{
    width: 200px;
    height: 200px;
    background-color: lightskyblue;
    position: relative;
     }
.box{
    width: 100px;
    height: 100px;
    background-color: hotpink;
        position: absolute;
    left:50%;
    margin-left: -50px;         
    }

<div class="wrap">
      <div class="box">一個子級盒子</div>
</div>

絕對居中

子元素必須比父元素小，子元素寬高也必須要知道

.wrap{
    width: 200px;
    height: 200px;
    background-color: lightskyblue;
    position: relative;
     }
.box{
        width: 100px;
    height: 100px;
    background-color: hotpink;
    position: absolute;
    top: 0;
    right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        overflow: auto;
 }
<div class="wrap">
       <div class="box"></div>
</div>

可能總結的也不太齊全，會慢慢補全。