一. 目的：

知道在某種場景下該使用何種居中。

二. 內(nèi)容

1. 簡單的水平居中

1.1 text-align: center;
使用場景 作用在block上，使文本或子元素在block里水平居中

1.2 margin: 0 auto;
使用場景：讓聲明了寬度的塊級元素水平居中。固定寬度水平居中，大部分網(wǎng)頁都是這樣布局。

2 垂直居中

2.1 上下padding相等
使用場景： 適用于子元素高度不確定、父容器高度不固定的情景

2.2 設置height與line-height相等
使用場景： 能確定被居中的元素只有一行，比如單行文本、按鈕等

3 垂直水平絕對居中

使用場景： 父容器寬高不確定的情景，可用于適應不同的屏幕

3.1 此種適用于被居中元素寬高固定時

 E {
     width:200px;
     height: 100px;
     position: absolute/fixed;
     left: 50%;
     top: 50%;
     margin-left: -100px;
     margin-top: -50px;
 }

3.2 此種適用于被居中元素寬高固定或不固定時

E {
    position: absolute/fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)；
 }

三 . 補充：

第3種絕對居中通常應用于頁面大小為viewport全屏的時候。把頁面大小為viewport全屏有2中方法。

1. 設置寬高為100%，適用于網(wǎng)頁首頁、次頁都為全屏的情景。

   body,
   html,
   F {
       height: 100%;
   } 
   

2. 設置相對定位，適用于彈框等不用翻頁的頁面。

   F {
      position: absolute/fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }