最近要准备移动端项目，大半年没好好写过CSS了，今天恶补了一下CSS的一些布局，下面做一些分享。
水平居中布局
1.margin + 定宽
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.child { ???width: 100px; ???margin: 0 auto; ?}</style>这种常见的写法就不再赘述了。
2. table + margin
<div class="parent"> ?<span class="child">Demo</span></div><style> ?.child { ???display: table; ???margin: 0 auto; ?}</style>display: table 在这里的作用有两个：一、将span元素转为块元素性质，二、设置了span宽度为内容宽。
* 无需设置父元素样式 （支持 IE 8 及其以上版本），IE 8以下版本需要调整页面结构至 table。
3.inline-block + text-align
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.child { ???display: inline-block; ?} ?.parent { ???text-align: center; ?}</style>display: inline-block 将div块元素转为行内块元素性质(具备了一些行内元素的特性),固给父元素设置text-align: center 能起到居中效果。
* 兼容性佳（甚至可以兼容 IE 6 和 IE 7）
4. absolute + margin-left
<div class="parent"> ?<div class="child">Demo</div></div><style>.parent { ???position: relative; ?} ?.child { ???position: absolute; ???left: 50%; ???width: 100px; ???margin-left: -50px; ?/* width/2 */ ?}</style>* 宽度固定
* 相比于使用transform ，有兼容性更好
5. 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 属性，有兼容性问题
注：绝对定位脱离文档流，不会对后续元素的布局造成影响
6. flex + justify-content
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.parent { ???display: flex; ???justify-content: center; ?}</style>* 只需设置父节点属性，无需设置子元素
* flex布局有兼容性问题
垂直居中
1.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)
2.absolute + transform
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.parent { ???position: relative; ?} ?.child { ???position: absolute; ???top: 50%; ???transform: translateY(-50%); ?}</style>* transform 为 CSS3 属性，有兼容性问题
* 同水平居中，这也可以用margin-top实现，原理水平居中
3.flex + align-items
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.parent { ???display: flex; ???align-items: center; ?}</style>* 有兼容问题
水平垂直居中
1. absolute + transform
<div class="parent"> ?<div class="child">Demo</div></div><style> ?.parent { ???position: relative; ?} ?.child { ???position: absolute; ???left: 50%; ???top: 50%; ???transform: translate(-50%, -50%); ?}</style>2. 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>* 兼容性好
3. 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>* 只需设置父节点属性，无需设置子元素
* 有兼容性问题
一列定宽，一列自适应
1.float + margin
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ?</div></div><style> ?.left { ???float: left; ???width: 100px; ?} ?.right { ???margin-left: 100px ???/*间距可再加入 margin-left */ ?}</style>* IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right-fix"> ???<div class="right"> ?????<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>* 此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
2.float + overflow
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ?</div></div><style> ?.left { ???float: left; ???width: 100px; ?} ?.right { ???overflow: hidden; ?}</style>* 设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么？用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6。
3 .table
?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ?</div></div><style> ?.parent { ???display: table; ???width: 100%; ???table-layout: fixed; ?} ?.left { ???display: table-cell; ???width: 100px; ?} ?.right { ???display: table-cell; ???/*宽度为剩余宽度*/ ?}</style>* table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。
4. flex
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ?</div></div><style> ?.parent { ???display: flex; ?} ?.left { ???width: 100px; ???margin-left: 20px; ?} ?.right { ???flex: 1; ?}</style>* 低版本浏览器兼容问题
* 性能问题，只适合小范围布局
等分布局
1. float
<div class="parent"> ?<div class="column"> ???<p>1</p> ?</div> ?<div class="column"> ???<p>2</p> ?</div> ?<div class="column"> ???<p>3</p> ?</div> ?<div class="column"> ???<p>4</p> ?</div></div><style> ?.parent { ???margin-left: -20px; ?} ?.column { ???float: left; ???width: 25%; ???padding-left: 20px; ???box-sizing: border-box; ?}</style>* 此方法可以完美兼容 IE8 以上版本。
2. flex
<div class="parent"> ?<div class="column"> ???<p>1</p> ?</div> ?<div class="column"> ???<p>2</p> ?</div> ?<div class="column"> ???<p>3</p> ?</div> ?<div class="column"> ???<p>4</p> ?</div></div><style> ?.parent { ???display: flex; ?} ?.column { ???flex: 1; ?} ?.column+.column { /* 相邻兄弟选择器 */ ???margin-left: 20px; ?}</style>* 强大简单，有兼容问题。
3. table
<div class=‘parent-fix‘> ?<div class="parent"> ???<div class="column"> ?????<p>1</p> ???</div> ???<div class="column"> ?????<p>2</p> ???</div> ???<div class="column"> ?????<p>3</p> ???</div> ???<div class="column"> ?????<p>4</p> ???</div> ?</div></div><style> ?.parent-fix { ???margin-left: -20px; ?} ?.parent { ???display: table; ???width: 100%; ???/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/ ???table-layout: fixed; ?} ?.column { ???display: table-cell; ???padding-left: 20px; ?}</style>等高布局
1.table
table 的特性为每列等宽，每行等高可以用于解决此需求
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ???<p>right</p> ?</div></div><style> ?.parent { ???display: table; ???width: 100%; ???table-layout: fixed; ?} ?.left { ???display: table-cell; ???width: 100px; ?} ?.right { ???display: table-cell ???/*宽度为剩余宽度*/ ?}</style>2.flex
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ???<p>right</p> ?</div></div><style> ?.parent { ???display: flex; ?} ?.left { ???width: 100px; ???margin-left: 20px; ?} ?.right { ???flex: 1; ?}</style>* 注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch。
3. float
<div class="parent"> ?<div class="left"> ???<p>left</p> ?</div> ?<div class="right"> ???<p>right</p> ???<p>right</p> ?</div></div><style> ?.parent { ???overflow: hidden; ?} ?.left, ?.right { ???padding-bottom: 9999px; ???margin-bottom: -9999px; ?} ?.left { ???float: left; ???width: 100px; ???margin-right: 20px; ?} ?.right { ???overflow: hidden; ?}</style>* 此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
结语： 一样的布局可能有很多种方法实现，以上只作为参考！
CSS常见布局解决方案
原文地址：http://www.cnblogs.com/AllenR/p/7920581.html