常用两列布局，多列布局和div竖直居中
body {
margin:;
padding:; }
.w200 {
width: 200px; }
.mar-left200 {
margin-left: 200px; }
.red {
background-color: red; }
.middle {
vertical-align: middle; }
.block {
width: 80%;
height: 300px;
border: 1px solid #eee;
margin: 0 auto; }
.content {
width: 300px;
height: 100px;
background-color: #E1F9FF; }
.clearfix {
*zoom:; }
.clearfix:before, .clearfix:after {
content: '';
display: table; }
.clearfix:after {
clear: both; }
.layout-inline div, .layout-inline span {
width: 200px;
height: 300px;
line-height: 40px;
display: inline-block;
background-color: #E6E6FA; }
.layout-float div {
float: left;
word-break: break-all;
height: 100%; }
.layout-position .absolute {
position: absolute;
height: 300px; }
.layout-table {
display: table; }
.layout-table div {
display: table-cell;
text-align: center; }
.ver-position {
border: 1px solid #eee;
position: relative; }
.ver-position div {
margin: auto;
position: absolute;
left:;
right:;
top:;
bottom:; }
.ver-position label {
background-color: #E1F9FF;
position: absolute;
left: 50%;
margin-left: -150px;
right:;
top: 50%;
margin-top: -50px;
bottom:; }
.floater {
float: left;
height: 50%;
margin-bottom: -50px; }
.cont {
clear: both;
position: relative;
margin: auto; }
/*# sourceMappingURL=index.css.map */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用布局</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<section class="block layout-inline">
<div>lalala</div><!--
--><div>lalala</div><!--
--><div>lalala</div>
</section>
<div class="block layout-float clearfix">
<div class="w200 red">11111111111</div>
<div>2222222</div>
</div>
<div class="block layout-position">
<div class="w200 absolute red">11111111111</div>
<div class="mar-left200">2222222</div>
</div>
<div class="block layout-table">
<div class=" w200 red">11111111111</div>
<div>222222222</div>
<div>33333333333</div>
</div>
<div class="block ver-position">
<div class="content">111111111111111111</div>
</div>
<div class="block ver-position">
<label class="content">22222</label>
</div>
<div class="block ">
<div class="floater">
</div>
<div class="content cont">Content here</div>
</div>
<div class="block layout-table">
<div class="content middle">111</div>
</div> </body>
</html>