css实现垂直居中

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.