常用两列布局，多列布局和div竖直居中
body { margin: 0; padding: 0; } .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: 1; } .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: 0; right: 0; top: 0; bottom: 0; } .ver-position label { background-color: #E1F9FF; position: absolute; left: 50%; margin-left: -150px; right: 0; top: 50%; margin-top: -50px; bottom: 0; } .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>