1.居中布局：
水平居中：子元素于父元素水平居中且其（子元素与父元素）宽度均可变。
inline-block+text-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
*display: inline;
*zoom: 1;/**IE7中居中**/
}
.parent { text-align: center; }
</style>
兼容性佳（甚至可以兼容 IE 6 和 IE 7）
table+margin
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child { display: table; margin: 0 auto; }
</style>
display: table在表现上类似 block 元素，但是宽度为内容宽。支持 IE 8 及其以上版本。
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { position: relative; }
.child { position: absolute; left: 50%; transform: translateX(-50%); }
</style>
transform为 CSS3 属性，有兼容性问题
flex + justify-content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; }
/* 或者下面的方法，可以达到一样的效果 */
.parent { display: flex; }
.child { margin: 0 auto; }
</style>
有兼容性问题
2.垂直居中
子元素于父元素垂直居中且其（子元素与父元素）高度均可变。
table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: table-cell; vertical-align: middle; }
</style>
兼容性好（支持 IE 8，以下版本需要调整页面结构至 table）
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { position: relative; }
.child { position: absolute; top: 50%; transform: translateY(-50%); }
</style>
flex + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; align-items: center; }
</style>
有兼容性问题
3.水平垂直居中
子元素于父元素垂直及水平居中且其（子元素与父元素）高度宽度均可变。
inline-block + text-align + table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { text-align: center; display: table-cell; vertical-align: middle; }
.child { display: inline-block;}
</style>
兼容性好
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; align-items: center; }
</style>
flex + justify-content + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; align-items: center; }
</style>
有兼容性问题
4.多列布局
多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。
一列定宽，一列自适应
float + margin
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right { margin-left: 100px /*间距可再加入 margin-left */ }
</style>
NOTE：IE 6 中会有3像素的 BUG，解决方法可以在 .left加入 margin-left:-3px。
float + margin + (fix) 改造版
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right-fix { float: right; width: 100%; margin-left: -100px; }
.right { margin-left: 100px /*间距可再加入 margin-left */ }
</style>
NOTE：此方法不会存在 IE 6 中3像素的 BUG，但 .left不可选择， 需要设置 .left {position: relative}来提高层级。 此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。
float + overflow
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right { overflow: hidden; }
</style>
设置 overflow: hidden会触发 BFC 模式（Block Formatting Context）块级格式化文本。 BFC 中的内容与外界的元素是隔离的。
- 不支持 IE 6
