下面来看一个最简单的小案例，在浏览器窗口居中一个小盒子：
就这样一个很简单的小案例，你能够想到多少种方法来实现呢？对块元素盒子的左右居中相信大家都不陌生，{margin:auto;}就能够实现，但是对于垂直自适应居中就不起作用了，下面就从最简单的说起。
标签结构如下：
<body>
<div class="box"></div>
</body>
方法一大伙熟知的居中方法
.box{
position:absolute;
left:50%;
top:50%;
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;
100px;
height:100px;
background-color:red;
}
这种方案比较取巧，而且与盒子的宽高等无关，也不需要计算，不过经过测试发现IE7及其以下并不支持这种方案，如果项目不要求兼容到IE7及其以下的话可以作为首选，如果要考虑的话第一种方案兼容的蛮好。
方法三（1）flex弹性盒模型
html,body{
height:100%;
}
body{
display:flex;
justify-content:center;
align-items:center;
}
.box{
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{
100px;
height:100px;
background-color:red;
}
这哥们常常配合flex盒模型做一些不同版本浏览器的兼容性处理，不过这哥们本身的兼容性可没有flex那么好了，功能也稍微逊色于flex，不过作为资深的css玩家，这东西还是需要懂的。
方法四table布局（鲜有人熟悉的居中方法）
html,body{
100%
height:100%;
}
html{
display:table;
}
body{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.box{
display:inline-block;
100px;
height:100px;
background-color:red;
}
通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了，不过对于IE7及其以下的浏览器是不支持的！不过对于IE7及其以下浏览器的固执，我们来看看下面一种方案配合起来解决这个兼容。
方法五font-size居中（不可思议吧，IE7、IE6）
body{
342px;
height:342px;
border:1px solid red;
font-size:300px;
text-align:center;
}
.box{
display:inline-block;
100px;
height:100px;
background-color:red;
font-size:12px;
vertical-align:middle;
}
这种方案需要知道父元素的宽高，然后把父元素的font-size值设置为父元素的高度除以1.14，这样在IE7及其以下的浏览器能够做到居中，当然这里不是自适应了，如果需要自适应的话可以结合js来实现，即js动态获取父元素的宽高值然后计算出父元素font-size的值，大伙可以自己试试。