您的位置：首页 > Web前端 > CSS

探究css中各种情况下的元素的垂直和水平居中的问题

2011-03-08 14:56 731 查看

今天的工作涉及到一个未知图片大小（图片小于容器大小）的垂直居中的问题。很久之前就“久仰”各种浏览器对css垂直居中的“支持”情况了，比较难搞，完全不像水平居中那样简单。趁有机会就整理了一些情况下的垂直水平居中的情况，给大家和自己做个参考，欢迎指正。

以下例子都经过测试，在ie6、7、8和ff上无兼容性问题。在下面的预览可能会出现问题，大家可以直接把代码拷回本地html文件测试

1、容器大小已定、图片大小未定（图片小于容器大小）的垂直水平居中。这种情况参考了听说是淘宝笔试的题目的一种答案，效果如下：

2、容器大小已定，里面的子div垂直水平居中，效果如下：

我是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

==================================================

作者：绿色花园

出处：/article/5916738.html

==================================================

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航