一、水平居中

1. 行內(nèi)元素：
   text-align: center
   適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，inline-flex）

2. 塊級元素：
   對于塊狀元素（display:block）來說，我們需要將它的左右外邊距（即margin-left，margin-right）設(shè)置為auto，即可實現(xiàn)塊狀元素的居中

3. 多個塊級元素：
   ①　元素：display: inline-block; 父元素text-align: center;
   將元素的display屬性設(shè)置為inline-block，并且把父元素的text-align屬性設(shè)置為center即可實現(xiàn)

②　使用flexbox：
父元素display:flex; justify-content: center;
只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center即可

二、垂直居中

1. 單個行內(nèi)元素：
   當(dāng)一個行內(nèi)元素，即inline，inline-*類型的元素需要居中的話，可以將它的height和line-height同時設(shè)置為父元素的高度即可實現(xiàn)垂直居中效果

2. 多行行內(nèi)元素：
   組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果

3. 已知高度的塊級元素：
   將待居中元素設(shè)置為絕對定位，并且設(shè)置margin-top為居中元素高度一半的負(fù)值

4. 未知高度的塊級元素：

       .item{
       top: 50%;
       position: absolute;
       transform: translateY(-50%); /* 這里我們使用css3的transform來達(dá)到類似效果 */
       }
   

使用transform屬性來垂直移動來實現(xiàn)垂直居中。

三、水平垂直居中

1. 已知高度和寬度的元素：
   設(shè)置元素定位為absolute，并且設(shè)置top,left絕對值為50%，margin-top和margin-left為元素高度一半的負(fù)值即可

2. 未知高度和寬度的元素：

• 類似的transform屬性來定義

      .item{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       }
  

• 使用table-cell:
  在父元素中設(shè)置display: table-cell; vertical-align: middle; text-align:center;

• 使用box（以WebKit為例，其它所需兼容再添。注意瀏覽器支持情況Firefox 、Safari、Opera 以及 Chrome ）
  display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;

3. 使用flex布局實現(xiàn)：
   在父元素設(shè)置display: flex; justify-content:center; align-items: center; /* 注意這里需要設(shè)置高度來查看垂直居中效果 */

（注意瀏覽器支持情況Firefox 、Safari、Opera 以及 Chrome ）

*flex和box較適合移動端以及不需要考慮低版本瀏覽器的開發(fā)。