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 
)
