垂直水平居中

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

<style>
.box {
　　height: 400px;
　　width: 400px;
　　vertical-align: middle;
　　display: table-cell;
　　border: 1px solid #666;
}
.main {
　　height: 200px;
　　width: 200px;
　　/* display: block; */
　　margin: 0 auto;
　　text-align: center;
　　border: 1px solid #666;
}
</style>

<body>
　　<div class="box">
　　　　<div class="main">

　　　　</div>
　　</div>
</body>

例子2

　　标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>方法2 - 未知高度的图片垂直居中</title> 
<style type="text/css"> 
body { 
height:100%; 
} 
#box{ 
width:500px;height:400px; 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
border:1px solid #d3d3d3;background:#fff; 
} 
#box img{ 
border:1px solid #ccc; 
} 
</style> 
<!--[if IE]> 
<style type="text/css">? 
#box i { 
display:inline-block; 
height:100%; 
vertical-align:middle 
} 
#box img { 
vertical-align:middle 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div id="box"> 
<i></i><img src="images/demo_zl.png" alt="" /> 
</div> 
</body> 

posted @ 2016-10-08 19:21  furry`  阅读(53)  评论(0)    收藏  举报