代码如下
<style type="text/css">
#a1{width: 1000px; height: 200px; border: 2px solid red;}
#a2{width: 500px; height: 100px; border: 3px solid black;}
#a3{width: 200px; height: 50px; border: 1px solid black;}
#a1{display: table;}
#a2{
display: table-cell;
vertical-align: middle;
}
body{ text-align:center}
#a2, #a3{ margin:0 auto;}
</style>
<body>
<div id="a1">
<div id="a2">
<p>hahaha</p>
<div id="a3">
<p>hahaha</p>
</div>
</div>
</div>
</body>
运行结果如下
a2为什么跟a1同样大小！！！！！！！？？？？？？？
<style type="text/css">
#a1{width: 1000px; height: 200px; border: 2px solid red;}
#a2{width: 500px; height: 100px; border: 3px solid black;}
#a3{width: 200px; height: 50px; border: 1px solid black;}
#a1{display: table;}
#a2{
display: table-cell;
vertical-align: middle;
}
body{ text-align:center}
#a2, #a3{ margin:0 auto;}
</style>
<body>
<div id="a1">
<div id="a2">
<p>hahaha</p>
<div id="a3">
<p>hahaha</p>
</div>
</div>
</div>
</body>
运行结果如下
a2为什么跟a1同样大小！！！！！！！？？？？？？？
