盒子在窗口垂直水平居中有七種方法：
第一種：利用負(fù)的margin來進(jìn)行居中，需要知道固定寬高，限制比較大。
body>div:nth-of-type(1){ width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;}
body>div:nth-of-type(1)div{ width:100px; height:100px; background:#0f0; position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px;}
第二種：利用絕對(duì)定位居中，非常常用的一種方法图柏。body>div:nth-of-type(2){ width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;}
body>div:nth-of-type(2) div{ width:100px; height:100px; background:#0f0; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
第三種：使用flex布局（.min寬高可不固定）
body>div:nth-of-type(3){ width:400px; height:400px; background:#ff0; margin-bottom:10px; display:flex;}
body>div:nth-of-type(3) div{ width:100px; height:100px; background:#0f0; margin:auto }
第四種：flex居中(演示)。CSS3中引入的新布局方式任连，比較好用蚤吹。缺點(diǎn)：IE9以及IE9一下不兼容。
body>div:nth-of-type(4){ width:400px; height:400px; background:#ff0; margin-bottom:10px; display:flex; justify-content:center;align-items:center}
body>div:nth-of-type(4) div{ width:100px; height:100px; background:#0f0; }
第五種：利用table-cell來控制垂直居中随抠。
body>div:nth-of-type(5){ width:400px; height:400px; background:#ff0; margin-bottom:10px; vertical-align:middle; display:table-cell; text-align:center;}
body>div:nth-of-type(5) div{ width:100px; height:100px; background:#0f0; display:inline-block }
第六種：利用空盒子做外容器裁着，里邊的塊元素會(huì)自動(dòng)垂直居中，只需要控制一下水平居中就可以達(dá)到效果拱她。
body>div:nth-of-type(6){ width:400px; height:400px; background:#ff0; margin-bottom:10px; text-align:center;}
body>div:nth-of-type(6) div{ width:100px; height:100px; background:#0f0; display:inline-block; vertical-align:middle }
body>div:nth-of-type(6) span{ width:0; height:100%; display:inline-block; vertical-align:middle;}
第七種：這種方法靈活運(yùn)用CSS中transform屬性二驰，較為新奇。缺點(diǎn)是IE9下不兼容秉沼。
body>div:nth-of-type(7){ width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;}
body>div:nth-of-type(7) div{ width:100px; height:100px; background:#0f0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
這七種是我們經(jīng)惩叭福可以遇到的例子，大家可以在今后的工作學(xué)習(xí)中熟練并且掌握唬复，可以很好的解決現(xiàn)實(shí)中遇到的某些實(shí)際問題矗积。
來源：千鋒HTML5
