div不固定高度垂直居中

父容器的css属性 display:table;overflow:hidden;
子容器的css属性 vertical-align:middle;display:table-cell;

<!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>
    <title></title>

　　<style>

　　　　.a1{

　　　　　　width:500px;

　　　　　　height:400px;

　　　　　　display:table;

　　　　　　overflow:hidden;

　　　　}

　　　　.a1{

　　　　　　width:500px;

　　　　　　height:200px;

　　　　　　vertical-align:middle;

　　　　　　display:table-cell;

　　　　}

　　</style>
</head>
<body >
　　<div class="a1">
　　　　<div class="a2"></div>
　　</div>
</body>
</html>

posted @ 2017-03-27 14:37  qiaoguoqing  阅读(335)  评论(0)    收藏  举报