本文将简单介绍如何使用CSS做出以下效果：
- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
- 其他小技巧
一、左右布局
左边定宽，右边自适应
- position + margin
.left {position: absolute;top: 0;left: 0;width: 150px;background: red;}
.right {margin-left: 160px;background: green;}
<div class="left">左边position+定宽</div>
<div class="right">右边自适应</div>
- float + overflow
.left {margin-right: 10px; // 如需设置两列之间的间距float: left;width: 150px;background: red;}
.right {overflow: auto;background: gray;}
<div class="left">左边float+定宽</div>
<div class="right">右边自适应</div>
二、左中右布局
三列布局通常是两侧定宽，中间自适应，布局方案类似于二列布局
1.posotion + margin
.left {position: absolute;top: 0;left: 0;width: 150px;background: red;}
.right {position: absolute;top: 0;right: 0;width: 150px;background: gray;}
.main{margin:0 160px;background: green;}
<div class="left">左边position+定宽</div>
<div class="main">中间自适应</div>
<div class="right">右边position+定宽</div>
- float + overflow + margin
.left {float: left;width: 150px;background: red;}
.right {float: right;width: 150px;overflow: auto;background: gray;}
.main {margin: 0 160px;background: green;}// 注意排列顺序为left、right、main
<div class="left">左边float+定宽</div>
<div class="right">右边float+定宽</div>
<div class="main">中间margin+宽度自适应</div>
圣杯布局
float + 负margin + padding + position
特点：两侧定宽，中间自适应
思路：
- 按main、left、right排序；
- 三者都float:left;
- 中间栏设置width:100%，左右两侧栏设置一定值width(如此例中的150和100)；
- 此时中间栏独占一行，把左右两侧栏挤下去了，设置左侧栏margin-left:-100%，将左侧栏拉上来至第一栏处；同理，设置右侧栏margin-left:-100px，将右侧栏拉上来至第三栏处；
- 此时会发现中间栏的头部和尾部分别被左右两栏的覆盖了，所以设置父元素padding：0 100px 0 150px，给左右两栏留出足够的空间，然后再把左右两栏相对定位至留空的地方（position:relative）;
.content {padding: 0 100px 0 150px;overflow: hidden; //用于清除浮动}
.main {float: left;width: 100%;background: green;}
.left {float: left;position: relative;left: -150px;margin-left: -100%;width: 150px;background: red;}
.right {float: left;position: relative;right:-100px;margin-left: -100px;width: 100px;background: gray;}
<div class="content">
<div class="main">中间自适应</div>
<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
</div>
双飞翼布局
float + 负margin + margin
特点：两侧定宽，中间自适应
思路：类似于圣杯布局
1~4思路同圣杯布局一样；
5.不在父元素上设置padding，而是在中间栏里再添加一层div，设置margin：0 100px 0 150px，这样，中间栏的宽度就会缩小至左右两侧之间，而不会被其覆盖，省掉了对两侧栏设置相对布局的步骤;
.content {overflow: hidden;}.main {float: left;width: 100%;}
.main-content {margin: 0 100px 0 150px;background: green;}
.left {float: left;margin-left: -100%;width: 150px;background: red;}
.right {float: left;margin-left: -100px;width: 100px;background: gray;}
<div class="content">
<div class="main">
<div class="main-content">中间自适应</div>
</div>
<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
</div>
三、水平居中
文字水平居中
text-align:center;
容器水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
四、垂直居中
文字垂直居中
单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。
<div id="container">1234567890</div>
然后CSS这样写：
div#container {height: 35px; line-height: 35px;}
如果有n行文字，那么将行高设为容器高度的n分之一即可。
容器的垂直居中
比如，有一大一小两个容器，请问如何将小容器垂直居中
<div id="big">
<div id="small">
</div>
</div>
首先，将大容器的定位为relative
div#big{
position:relative;
height:480px;
}
然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
使用同样的思路，也可以做出水平居中的效果。
五、其他小技巧
搜索: 关键词 MDN
CSS Tricks
搜索: 阮一峰 css
张鑫旭的 240 多篇 CSS 博客
本文参考资料：
CSS常见布局方案归纳
CSS使用技巧
