实现盒子垂直居中（用绝对定位来实现盒子垂直居中）
遮罩下盒子垂直居中（用固定定位实现盒子垂直居中）
使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用-moz-box-pack、-moz-box-align的形式；在Safari、Chrom浏览器中，需要使用-webkit-box-pack、-webkit-box-align的形式。
在使用CSS 1.0或CSS 2.0的时候，还有一种比较难处理的情况，就是如何让图像位于元素正中央，使用box-pack属性及box-align属性，同样也使该问题很容易就得到了解决。
如图，为一个浏览器窗口正中央显示图像，不管浏览器如何变化，该图像始终位于浏览器正中央。
在线演示
html：
<img src="images/05.jpg" alt="">css：
<style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: -moz-box;/*兼容Firefox*/ display: -webkit-box;/*兼容FSafari、Chrome*/ -moz-box-align: center;/*兼容Firefox*/ -webkit-box-align: center;/*兼容FSafari、Chrome */ -moz-box-pack: center;/*兼容Firefox*/ -webkit-box-pack: center;/*兼容FSafari、Chrome */ } img { width: 160px; } </style>