怎么让div水平垂直居中
如何让div水平垂直居中
如何让div水平垂直居中
@(css)[妙瞳]
引子
我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
div.box{
background-color:pink;
border:2px solid #000;
width:960px;
height:500px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="box">
<img src="girl.jpg" alt="美女">
</div>
</body>
</html>效果图：
现在先让图片在div中水平居中
我们可以先给图片套一层盒子。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:500px;
height:500px;
margin:50px auto;
display:table;
}
div.wrapper{
text-align:center;
display:table-cell;
vertical-align:middle;
}
div.wrapper img{
border:1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE8/Firefox/Chrome/Safari/Opera页面效果：
IE6/IE7页面效果：
由此可见要做IE6/IE7的兼容：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:500px;
height:500px;
margin:0 auto;
display:table;
margin-top:20px;
}
div.wrapper{
text-align:center;
display:table-cell;
vertical-align:middle;
}
div.wrapper img{
border:1px solid #ddd;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.container{
position:relative;
}
div.wrapper{
position:absolute;
left:50%;top:50%;
}
div.wrapper img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE6/IE7效果图：
综上所述，要让div里面的内容水平居中，可以使用text-align:center;
要实现垂直居中，container 的display:table;而wrapper的display:table-cell;同时vertical-align:middle;就可以实现div里的图片水平垂直居中。
假如是多张图片，要实现居中：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
div.container{
background-color:pink;
border:2px solid #000;
width:700px;
height:500px;
margin:0 auto;
margin-top:50px;
}
div.wrapper{
text-align:center;
margin-top:28px;
}
div.wrapper img{
border:1px solid #ddd;
width:200px;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
<img src="girl3.jpg" alt="美女"/>
</div>
</div>
</body>
</html>IE6/IE7/IE8/Firefox/Chrome/Safari/Opera页面效果：
div.wrapper中的text-align:center;实现水平居中，margin-top:28px;实现垂直居中。
28px=[500-(200+1+1+10+10)*2]/2，即外层的高度减去里面的高度，然后除以2，设置margin-top,即可居中。
假如有错误或者建议的地方，欢迎指正!-----妙瞳。
- 2楼Tony Tan
- 垂直居中时你这里要求高度固定，不固定高度时又垂直居中也很常见
- 1楼Tlink
- 百分比，margin:auto;，不是百分比，margin:0 auto;，实在不行就加，lt;centergt;lt;/centergt;
- Re: 妙瞳
- @Tlink，center标签，，在 HTML 4.01 中，center 元素不被赞成使用。，在 XHTML 1.0 Strict DTD 中，center 元素不被支持。，center标签可以实现水平居中，但无法垂直居中。，但是center标签已经慢慢被淘汰，因为有css,text-align:center,更加符合结构和表现的分离。，，margin:auto,可以这样写，也可以实现水平垂直居中，与position：absolute;top:0;right:0;left:0;bottom:0;margin:auto;在一起使用，可以实现水平垂直居中，但是，是在IE8及以上的现代标准浏览器可以实现，IE6/IE7也是有问题的。，，margin：0 auto;可以实现水平居中。表示上下margin为0,左右居中，具体原理可以看:，在 CSS 2 规范的 10 章 可视化布局内，对 块级非替换元素在普通流内布局有公式描述，Visual formatting model details，#39;margin-left#39; + #39;border-left-width#39; + #39;padding-left#39; + #39;width#39; + #39;padding-right#39; + #39;border-right-width#39; + #39;margin-right#39; = width of containing block，，就是 左m+左b+左p+w+右p+右b+右m = 包含块宽度，，以及对这公式的 5 条 if，跟这问题直接相关的是2个。先说第一个，如果啊，width 是 auto 值，那么其他是 auto 的值就为 0.，所以呢，先说 width auto margin auto 的时候啊，margin 就 0 了。，整个容器充满包含块呗。也就没水平居中啥事儿了。，，然后呢，说水平居中的事儿。，，这里又有个if，如果 #39;margin-left#39; #39;margin-right#39; 都是 auto 值，使用的值相等，那么就水平居中包含块。，基本上规定的死死了。，，所以连起来就是：，如果有 width 那么 ml/mr 是 auto(其他值么)，那就是0，后面的一条 if 不生效了。，如果 width 不是 auto，那就是有确定宽度了。 ml/mr 是 auto，那就居中。，，其实根据最初的公式很好理解，，元素的包含块宽度是最初能定下来。，（你想啊，根 HTML 的包含块不就是视口么，浏览起内窗口宽度啊，总能知道吧。然后根据这个初始包含块宽度往下算），所以，就有一系列确定值。，确定标黑，不确定为（x），来说明 width，没b没p的情况（简化下么），没有的值标为 0，#39;margin-left#39;（x） + #39;border-left-width#39;（0） + #39;padding-left#39;（0） + #39;width#39;（假设 300px） + #39;padding-right#39;（0） + #39;border-right-width#39; （0）+ #39;margin-right#39;（x） = width of containing block（假设 600 px），整理下，x+0+0+300+0+0+x = 600，求x，2x+300 = 600，2x = 300，x = 150 （px），，好了，ml 和 mr 就算出 150 px 了，（如果 其他 bl、br、pl、pr 有值就带公式里，一样的），排布下，正好容器在包含块中间位置。，这就是最后内个 if 要说的内容。，，为何不能垂直居中……，这个主要是规范里没给这方面规定……，并与其他初始设定冲突。，，如：，width 相关计算依赖于其包含块，这玩意是最初能确定值。，而 height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的。，所以无法建立类似上面的公式来使用 mt、mb auto 实现高度居中。，且，mt、mb 的百分比值参照还是依赖包含块实际宽度的。，同理，因为包含块高度未知，没办法以确定值来计算 mt、mb。
- Re: 妙瞳
- @Tlink，非常感谢你的评论，呵呵。