探究css中各种情况下的元素的垂直和水平居中的问题
今天的工作涉及到一个未知图片大小（图片小于容器大小）的垂直居中的问题。很久之前就“久仰”各种浏览器对css垂直居中的“支持”情况了，比较难搞，完全不像水平居中那样简单。趁有机会就整理了一些情况下的垂直水平居中的情况，给大家和自己做个参考，欢迎指正。
以下例子都经过测试，在ie6、7、8和ff上无兼容性问题。在下面的预览可能会出现问题，大家可以直接把代码拷回本地html文件测试
1、容器大小已定、图片大小未定（图片小于容器大小）的垂直水平居中。这种情况参考了听说是淘宝笔试的题目的一种答案，效果如下：
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代码：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
各种情况下的居中
</
title
>
</
head
>
<
style
>
/*
图垂直片居中
*/
.container1
{
border
:
3px solid #F00
;
width
:
506px
;
margin-left
:
100px
;
}/*这个容器可以设置maigin，
使其子对象可以定位，下面的box1是不可以设置margin的*/
.box1
{
/*
非IE的主流浏览器识别的垂直居中的方法
*/
display
:
table-cell
;
vertical-align
:
middle
;
/*
设置水平居中
*/
text-align
:
center
;
/*
针对IE的Hack
*/
*display
:
block
;
*font-size
:
262px
;
/*
约为高度的0.873，200*0.873 约为175
*/
*font-family
:
Arial
;
/*
防止非utf-8引起的hack失效问题，如gbk编码
*/
width
:
500px
;
height
:
400px
;
border
:
3px solid #fff
;
}
.box1 img
{
/*
设置图片垂直居中
*/
vertical-align
:
middle
;
}
/*
div居中
*/
.container2
{
width
:
200px
;
height
:
200px
;
border
:
3px solid #F00
;
display
:
table
;
overflow
:
hidden
;
*position
:
relative
;
}
.box2
{
display
:
table-cell
;
vertical-align
:
middle
;
*position
:
absolute
;
*top
:
50%
;
}
.sub-box2
{
width
:
100px
;
height
:
100px
;
background
:
#FF0
;
border
:
1px solid
;
text-align
:
center
;
margin
:
0 auto
;
*position
:
relative
;
*top
:
-50%
;
}
/*
容器高度已定，多行文字居中
*/
.container3
{
width
:
200px
;
height
:
200px
;
border
:
3px solid #F00
;
display
:
table
;
overflow
:
hidden
;
*position
:
relative
;
}
.box3 p
{
margin
:
0
;
padding
:
0
;
}
/*
p标签有默认的margin和padding，所以要清零，或者直接在来个在css文档开头直接来个*{margin:0;padding:0;}，一了百了
*/
.box3
{
display
:
table-cell
;
vertical-align
:
middle
;
*position
:
absolute
;
*top
:
50%
;
}
.sub-box3
{
width
:
200px
;
text-align
:
center
;
*position
:
relative
;
*top
:
-50%
;
}
/*
容器高度已定，一行文字的居中
*/
.container4
{
width
:
300px
;
height
:
100px
;
border
:
3px solid #F00
;
}
.box4
{
width
:
300px
;
height
:
200px
;
}
.box4 p
{
margin
:
0
;
padding
:
0
;
line-height
:
100px
;
text-align
:
center
}
/*
容器高度未定，里面的元素居中
*/
.container5
{
width
:
200px
;
border
:
3px solid #F00
;
}
.container5 p
{
margin
:
0
;
padding
:
50px 0
;
text-align
:
center
;
}
</
style
>
<
body
>
<
div
class
="container1"
>
<
div
class
="box1"
>
<
img
src
="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img03.jpg"
/>
</
div
>
</
div
>
<
div
class
="container2"
>
<
div
class
="box2"
>
<
div
class
="sub-box2"
>
我是div
</
div
>
</
div
>
</
div
>
<
div
class
="container3"
>
<
div
class
="box3"
>
<
div
class
="sub-box3"
>
<
p
>
容器高度确定，
</
p
>
<
p
>
多行文字怎么居中？
</
p
>
<
p
>
一、这是多行文字第一行
<
br
/>
二、这是第二行
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class
="container4"
>
<
div
class
="box4"
>
<
p
>
容器高度已定，一行文字怎么居中？
</
p
>
</
div
>
</
div
>
<
div
class
="container5"
>
<
p
>
容器高度未定，怎么居中？
</
p
>
</
div
>
</
body
>
</
html
>
总结一下，css中各种元素的垂直居中问题有些是比较难理解的，要涉及到css比较细微的属性，有些还要涉及css hack，虽然看上去很复杂，但是我觉得在实际应用中的各种元素的垂直居中情况并不算多，用心去理顺了思路的话就会觉得这个问题不会那么可怕了。水平居中的情况则容易很多，如果里面的元素是文字则直接text-align，如果是div的话就先设个宽度再margin:0 auto，如果是img这些行内元素的话就先给个它套个div，设置一下宽度再margin:0 auto……
好了，我也总算把居中的问题理顺了，嘻……
参考资料：http://wenku.baidu.com/view/2aaf31fafab069dc502201c4.html
==================================================
作者：绿色花园
出处：http://www.cnblogs.com/cos2004/archive/2011/03/08/1977249.html
==================================================