<!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="/uploads/201103/201103091299628889_0.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……
好了，我也总算把居中的问题理顺了，嘻……
评论