下面來看一個最簡單的小案例，在瀏覽器窗口居中一個小盒子：
就這樣一個很簡單的小案例，你能夠想到多少種方法來實現呢？對塊元素盒子的左右居中相信大家都不陌生，{margin:auto;}就能夠實現，但是對於垂直自適應居中就不起作用了，下面就從最簡單的說起。
標簽結構如下：
<body>
<div class="box"></div>
</body>
方法一大伙熟知的居中方法
.box{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
background-color:red;
}
這種方法很簡單，也很直觀，但是有一定的局限性，就是固定了盒子的寬高，寫死了margin值，而且需要一定的計算。
方法二少部分人知道的居中方法
.box{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100px;
height:100px;
background-color:red;
}
這種方案比較取巧，而且與盒子的寬高等無關，也不需要計算，不過經過測試發現IE7及其以下並不支持這種方案，如果項目不要求兼容到IE7及其以下的話可以作為首選，如果要考慮的話第一種方案兼容的蠻好。
方法三（1）flex彈性盒模型
html,body{
height:100%;
}
body{
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:100px;
height:100px;
background-color:red;
}
學習過css3盒模型的伙伴應該深有感覺，這玩意簡直太爽了，不過他的兼容性可不容樂觀，所以只是大量的運用在了移動端或者是pc端不考慮低版本瀏覽器兼容的項目。
方法三（2）box彈性盒模型
html,body{
height:100%;
}
body{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.box{
width:100px;
height:100px;
background-color:red;
}
這哥們常常配合flex盒模型做一些不同版本瀏覽器的兼容性處理，不過這哥們本身的兼容性可沒有flex那么好了，功能也稍微遜色於flex，不過作為資深的css玩家，這東西還是需要懂的。
方法四table布局（鮮有人熟悉的居中方法）
html,body{
width:100%
height:100%;
}
html{
display:table;
}
body{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.box{
display:inline-block;
width:100px;
height:100px;
background-color:red;
}
通過display:table-cell 來把它模擬成一個表格單元格，這樣就可以利用表格那很方便的居中特性了，不過對於IE7及其以下的瀏覽器是不支持的！不過對於IE7及其以下瀏覽器的固執，我們來看看下面一種方案配合起來解決這個兼容。
方法五font-size居中（不可思議吧，IE7、IE6）
body{
width:342px;
height:342px;
border:1px solid red;
font-size:300px;
text-align:center;
}
.box{
display:inline-block;
width:100px;
height:100px;
background-color:red;
font-size:12px;
vertical-align:middle;
}
這種方案需要知道父元素的寬高，然后把父元素的font-size值設置為父元素的高度除以1.14，這樣在IE7及其以下的瀏覽器能夠做到居中，當然這里不是自適應了，如果需要自適應的話可以結合js來實現，即js動態獲取父元素的寬高值然后計算出父元素font-size的值，大伙可以自己試試。