摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居

適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，inline-flex）

html部分代碼:
    
文字元素
    

css部分代碼:
    nav, div{
    text-align: center;
        }
/*
解決方案：
將inline元素包裹在一個display屬性為block的父級元素中（如,div, nav)
設置這個父級元素屬性: text-align:center即可
*/

/* 現在大家可以看到nav和div中的子元素水平居中了 */

對于塊狀元素（display:block）來說，我們需要將它的左右外邊距（即，margin-left，margin-right）設置為auto，即可實現塊狀元素的居中，如下：

 html部分代碼:
    

  水平居中的塊狀元素
    
    
水平居中的塊狀元素

 css部分代碼:
/*
注意：需要居中的塊元素需要有固定的寬度，否則無法實現居中，因為占據100%寬度
*/
div,p {
  width: 200px; /* 這里需要設置元素寬度 */
  height: 150px;
  background: #222;
  color: #FFF;
}
/* 定義居中關鍵屬性 */
.center{
  /* 這里可以設置頂端外邊距 */
  margin: 10px auto;
}
/* 現在大家可以看到居中效果的塊狀元素了 */

如果頁面里有多個塊狀元素需要水平排列居中，可以將元素的display屬性設置為inline-block，并且把父元素的text-align屬性設置為center即可實現。

 html部分代碼:
    

    水平居中的塊狀元素
    
    

    水平居中的塊狀元素
    


  css部分代碼:
/*
解決方案：
設置這幾個塊狀的元素display屬性為inline-block，并且設置父元素text-align屬性為center即可
*/
.center{
  display:inline-block;
}
body{
  text-align:center;
}
/* 元素美化 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
}

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

 html部分代碼:

水平居中的塊狀元素
水平居中的塊狀元素

 css部分代碼:

解決方案：
設置需要水平居中的塊狀元素的父元素display為flex ，并且justify-content屬性為center即可

body{
  display: flex;
  justify-content: center;
}
/* 頁面美化元素 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
  margin: 10px;
}

當一個行內元素，即inline，inline-*類型的元素需要居中的話，可以將它的height和line-height同時設置為父元素的高度即可實現垂直居中效果。

 html部分代碼:

    

    hello, gbtags.com
    

  css部分代碼:

解決方案：將inline元素的高度和line-height設備為一致即可
#container{
  background: #222;
  height: 200px;
}
/*  以下代碼中，將a元素的height和line-height設置的和父元素一樣高度即可實現垂直居中 */
a{
  height: 200px;
  line-height:200px;  
  color: #FFF;
}

組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果，如下：

 html部分代碼:


  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
  


  css部分代碼:
解決方案：
使用display:table-cell和vertical-align來控制元素的居中效果
.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下屬性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}
a{
  color:#FFF;
}

html代碼：




css代碼：

解決方案：將待居中元素設置為絕對定位，并且設置margin-top為居中元素高度一半的負值
div{
  width: 100px;
  height: 100px;
  background: #222
}
/* 以下為居中代碼 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}
/* 現在可以看到這個元素垂直居中了，如果元素有padding設置，請自己相對計算一下margin-top值 */

對于無法知道高度的元素，使用transform屬性來垂直移動來實現垂直居中：

html代碼：
    

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.


css代碼：
解決方案：
因為無法指定margin-top的偏移量，所以這里使用transform屬性，垂直移動-50%即可
div{
  width: 150px;
  background: #222;
  color: #FFF;
}
/* 元素垂直居中代碼 */
.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 這里我們使用css3的transform來達到類似效果 */
}

html代碼：



css代碼：

解決方案：
將設置元素絕對定位，并且設置margin-left和margin-right為居中元素(高度或寬度/2)的負值即可
div{
  width: 150px;
  height: 150px;
  background: #222;
  color: #FFF;
}
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
}
/* 以上代碼即可保證一個已知高度和寬度的元素水平垂直都居中 */

html代碼：


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.


css代碼：

解決方案：將設置元素絕對定位，并且設置transform的translate為Ｘ，Ｙ軸同時移動-50%即可
div{
  background: #222;
  color: #FFF;
}
/* 以下代碼保證元素在水平和垂直方向上絕對居中 */
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 html代碼：


  


 css代碼：

解決方案：設置flex布局，并且定義居中元素的父元素justify-content和align-items屬性為center即可
/* 子元素CSS */
.item{
  background: #222;
  color: #FFF;
  width: 100px;
  height: 100px;
}
.parent{
  display: flex;
  justify-content:center;
  align-items: center;
  /* 注意這里需要設置高度來查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

注：以上資源整理自極客標簽學習文檔，推薦大家學習使用

附上網址：http://www.gbtags.com