【前端】這多是你看過最全的css居中解決方案了~

1.水平居中：行內元素解決方案

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

html部分代碼:
    <div>文字元素</div>
    <nav>
  <a href="">連接元素01</a>
  <a href="">連接元素02</a>
  <a href="">連接元素03</a>
    </nav>

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

/* 如今你們能夠看到nav和div中的子元素水平居中了 */

2. 水平居中：塊狀元素解決方案

對於塊狀元素（display:block）來講，咱們須要將它的左右外邊距（即，margin-left，margin-right）設置爲auto，便可實現塊狀元素的居中，以下：

html部分代碼:
    <div class="center">
  水平居中的塊狀元素
    </div>
    <p class="center">水平居中的塊狀元素</p>

 css部分代碼:
/*
注意：須要居中的塊元素須要有固定的寬度，不然沒法實現居中，由於佔據100%寬度
*/
div,p {
  width: 200px; /* 這裏須要設置元素寬度 */
  height: 150px;
  background: #222;
  color: #FFF;
}
/* 定義居中關鍵屬性 */
.center{
  /* 這裏能夠設置頂端外邊距 */
  margin: 10px auto;
}
/* 如今你們能夠看到居中效果的塊狀元素了 */

3.水平居中：多個塊狀元素解決方案

若是頁面裏有多個塊狀元素須要水平排列居中，能夠將元素的display屬性設置爲inline-block，而且把父元素的text-align屬性設置爲center便可實現。

html部分代碼:
    <div class="center">
    水平居中的塊狀元素
    </div>
    <div class="center">
    水平居中的塊狀元素
    </div>

<!--
如今你們能夠看到以上兩個塊狀元素水平橫向排列而且居中
提示：若是須要將以上兩個元素垂直排列居中的話，使用上一節的margin: 0 auto;便可實現
-->
  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;
}

4.水平居中：多個塊狀元素解決方案 (使用flexbox佈局實現)

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

html部分代碼:

<div>水平居中的塊狀元素</div>
<div>水平居中的塊狀元素</div>

 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;
}

5. 垂直居中：單行的行內元素解決方案

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

html部分代碼:

    <div id="container">
    <a href="#">hello, gbtags.com</a>
    </div>

  css部分代碼:

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

6.垂直居中：多行的行內元素解決方案

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

html部分代碼:

<div class="container">
  <a href="#">
    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!
  </a>
</div>

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

7. 垂直居中：已知高度的塊狀元素解決方案

html代碼：

<div class="item">
</div>

css代碼：

解決方案：將待居中元素設置爲絕對定位，而且設置margin-top爲居中元素高度一半的負值
div{
  width: 100px;
  height: 100px;
  background: #222
}
/* 如下爲居中代碼 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}
/* 如今能夠看到這個元素垂直居中了，若是元素有padding設置，請本身相對計算一下margin-top值 */

8.垂直居中：未知高度的塊狀元素解決方案

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

html代碼：
    <div class="item">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
</div>

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

9. 水平垂直居中：已知高度和寬度的元素解決方案

html代碼：

<div class="item">
</div>
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;
}
/* 以上代碼便可保證一個已知高度和寬度的元素水平垂直都居中 */

10.水平垂直居中：未知高度和寬度元素解決方案

html代碼：

<div class="item">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</div>

css代碼：

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

11.水平垂直居中：使用flex佈局實現

html代碼：

<div class="parent">
  <div class="item"></div>
</div>
 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