居中布局

点击查看居中演示示例 居中演示。
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/