今天的工作涉及到一个未知图片大小（图片小于容器大小）的垂直居中的问题。很久之前就“久仰”各种浏览器对css垂直居中的“支持”情况了，比较难搞，完全不像水平居中那样简单。趁有机会就整理了一些情况下的垂直水平居中的情况，给大家和自己做个参考，欢迎指正。
以下例子都经过测试，在ie6、7、8和ff上无兼容性问题。在下面的预览可能会出现问题，大家可以直接把代码拷回本地html文件测试
1、容器大小已定、图片大小未定（图片小于容器大小）的垂直水平居中。这种情况参考了听说是淘宝笔试的题目的一种答案，效果如下：
<style>.container1 { border: 3px solid rgb(255, 0, 0); width: 506px; margin-left: 100px; }.box1 { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 400px; border: 3px solid rgb(255, 255, 255); }.box1 img { vertical-align: middle; }.container2 { width: 200px; height: 200px; border: 3px solid rgb(255, 0, 0); display: table; overflow: hidden; }.box2 { display: table-cell; vertical-align: middle; }.sub-box2 { width: 100px; height: 100px; background: none repeat scroll 0% 0% rgb(255, 255, 0); border: 1px solid; text-align: center; margin: 0pt auto; }.container3 { width: 200px; height: 200px; border: 3px solid rgb(255, 0, 0); display: table; overflow: hidden; }.box3 p { margin: 0pt; padding: 0pt; }.box3 { display: table-cell; vertical-align: middle; }.sub-box3 { width: 200px; text-align: center; }.container4 { width: 300px; height: 100px; border: 3px solid rgb(255, 0, 0); }.box4 { width: 300px; height: 200px; }.box4 p { margin: 0pt; padding: 0pt; line-height: 100px; text-align: center; }.container5 { width: 200px; border: 3px solid rgb(255, 0, 0); }.container5 p { margin: 0pt; padding: 50px 0pt; text-align: center; }</style>
2、容器大小已定，里面的子div垂直水平居中，效果如下：
3、容器高度已定，多行文字垂直水平居中，效果如下：
容器高度确定，
多行文字怎么居中？
一、这是多行文字第一行
二、这是第二行
4、容器高度已定，一行文字的居中，这种情况比较简单，直接设置文字的line-height等于容器的高度就可以了，常用于a标签按钮里面文字的
居中。不过如果里面的文字是p或h1这些标签的时候则要注意了，他们有默认的magin和padding值，所以记得要先把它们清零，或者直接在css文
件头部写个“*{margin:0;padding:0;}”，这样就后顾无忧了。效果如下：
5、容器高度未定，里面的元素居中，效果如下：
这种情况下的垂直居中比较简单，直接设置padding值就可以了，水平居中的话要分两种情况：1.如果里面的内容是文字的话可以用text-
align；2.如果里面的是div可以用margin:0
auto（要先设置div的宽度）；3.如果是img这些行内元素的话就先给个它套个div，设置一下宽度再margin:0 auto
以上例子的html代码：
本文地址:
http://www.it300.com/article-1483.html
评论