1.显示为表格形式
<div class="box"> <div class="con">hihi</div> </div> .box{ display: table; width: 300px; height: 300px; } .con{ background-color: gray; margin: 0 auto; display: table-cell; vertical-align: middle; }效果图： Developer tools下可看到，此时的con相当于一个td，宽高的设置对它都是无效的，并且随着con内容的增多，父级div也会自适应地被撑开。尽管con的高度只有一行高，但是它的背景色却显示在了整个父级。 尝试在加一个一样的div，得到如下效果： 其中一个div内容过多先压缩另一个div，直到另一个div充满后，扩充父级div. 2.flex布局（css3，兼容性较差）
.box{ width: 300px; height: 300px; background-color: cornflowerblue; display: flex; align-items: center; } .con{ background-color: lightgoldenrodyellow; height: 100px; width: 300px; }图： 3.
