一、居中布局
水平居中
前提要求：父容器和子容器的宽度不定
方案一：inline-block+text-align
优点：兼容性好，在IE6\7上，用display:inline;zoom:1;模拟inline-block。
缺点：在父容器里设置了text-align：center；所以child也会继承这个属性，child容器里面的文字也会水平居中，因此要在child里重新设置text-align。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{ text-align: center;/*对inline和inline-block支持*/ } .child{ display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child">用inline-block和text-align实现水平居中DEMO</div> </div> </body> </html>
demo.css如下：
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:30px/1.5 ‘microsoft yahei‘;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .parent{background:#ddd;} .child{background:#666;color:#fff;}
方案二：table+margin
设置了display：table的元素的宽度也是由内容决定。
优点：只需要对child进行设置；兼容性较好，display：table能兼容IE8及以上。
.child{ display:table; margin:0 auto; }
方案三：absolute+transform
优点：absolute的元素脱离文档流，不会对其他元素产生影响。
缺点：IE8不支持transform
.parent{ position:relative; } .child{ position:absolute; left:50%; //相对于父容器的50% transform:translateX(-50%); //相对于自身的50% }
方案四：flex+justify-content
缺点：对于display：flex；IE8\9不支持、IE10部分支持
.parent{ display:flex; //给父元素设置flex属性，那么子元素就是flex-item，子元素的宽度是 auto，即宽度由内容决定 justify-content:center; }
或者
.parent{ display:flex; } .child{ margin:0 auto; }
垂直居中
前提要求：父容器的高度和子容器的高度不定
方案一：table-cell+vertical-align
优点:IE8及以上支持table-cell
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>垂直居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
方案二：absolute+transform
优点：子元素设置了绝对定位，不会影响其他元素
缺点：IE8不支持transform
.parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY:-50%; }
方案三：flex+align-items
优点：只需要对父元素设置样式
缺点：兼容性问题。对于display：flex；IE8\9不支持、IE10部分支持。对于align-items，IE8\9不支持，IE10部分支持。
.parent{ display:flex; align-items:center; }
水平垂直居中
前提要求：父容器的宽高不定，子容器的宽高不定
方案一：inline-block+text-align+table-cell+vertical-align
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>居中</title> 6 <link rel="stylesheet" type="text/css" href="demo.css"> 7 <style type="text/css"> 8 body{margin:20px;} 9 .parent{width:200px;height:300px;} 10 11 .parent{ 12 text-align: center; 13 display: table-cell; /* 此元素会变成一个行内元素,作为一个表格单元格显示（类似 <td> 和 <th>） */ 14 vertical-align: middle; /* 只对行内元素起作用 */ 15 16 .child{ 17 display: inline-block; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="parent"> 23 <div class="child">DEMO</div> 24 </div> 25 </body> 26 </html>
方案二：absolute+transform
.parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
方案三：flex+justify-content+align-items
.parent{ display: flex; justify-content: center; align-items: center; }
做解决方案时，需要了解CSS属性和值的特性，对问题进行分解。
二、多列布局
三、全屏布局
原文：http://www.cnblogs.com/rosestudy/p/4852376.html