點擊查看居中演示示例居中演示。
CSS中有一個很重要的概念-布局，而最常見的布局之一則是居中布局。那么，我們如何實現自適應寬高元素的居中布局呢？這里要談到兩個概念，內聯（inline）元素與塊級（block-level）元素。html中一切元素要么是inline元素，要么是block-level元素。針對inline與block-level元素，CSS又有不同的布局方法。
例如對于inline元素，text-align:center;可以實現水平居中。vertical-align:middle;則實現垂直居中。對于block-level元素，我們可以使用margin: 0 auto;實現水平居中。當然實現居中還有其他方法，比如設置position:absolute;
我們的問題是實現自適應寬高元素水平垂直居中？我們可以將問題分解為三步：1、設置元素自適應寬高 2、實現水平居中 3、實現垂直居中。
如何設置元素自適應寬高？一般元素高度都是自適應的，那么，有哪些設置能夠使得元素自適應寬度，并且與居中布局相關？display: inline-block; position: absoute; display: flex; display: table; display: table-cell;.....上述這些設置都能使元素既有塊級元素的特性，又自適應寬度。
在此基礎上，如何實現元素水平居中？可以使用對塊級元素居中的方式，也可以賦給元素內聯特性，采用內聯居中的方式。我們可以有以下搭配組合1、inline-block+text-align; 2、position+transform; 3、flex+justify-content; 4、table+margin;
1、給父元素設置，text-align:center; 設置子元素display為inline-block;
2、設置子元素position為absolute；并設置left: 50%; 使該元素左上角居中，然后使用transform: translateX( -50%)將其相對父元素水平居中。
3、設置父元素display:flex;父元素子元素默認為flex-item，flex-item內容自適應寬高，然后在父元素上設置，justify-content: center;使得子元素居中。
4、設置子元素display:table;父元素寬高自適應并且具有塊級元素特性，然后使用margin: 0 auto;使其居中。
實現元素垂直居中的方法與水平居中類似，有如下搭配組合：
1、父元素：display: table-cell; vertical-align: middle;（vertical-align對inline，inline-block，table-cell元素有效）
2、absolute+transform
3、父元素：display: flex; align-items: center;
綜合上述，將設置自適應寬高元素居中的方法可以有如下組合：
1、父元素：text-align: center; display: table-cell; vertical-align: middle; 子元素：display: inline-block;
優點：兼容性好
不足：子元素繼承居中屬性，需額外代碼修復
2、父元素： position: relative; 子元素：position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
優點：absolute脫離文檔流，不影響其他元素
不足：不兼容ie6/7/8
3、父元素：display: flex; justify-content: center; align-items: center;
優點：只需設置父元素
不足：不兼容ie6/7/8
以上居中方法并將ie6/7/8的兼容性放在考慮之列。
參考：網易前端微專業網頁架構課程。
原文：http://www.huangruixuan.com/2016/03/29/%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80/
