CSS垂直居中布局解决方案一

<div id="parent">
    <div id="child"></div>
</div>
<style>
    #parent {
        background-color: #666666;
        height: 600px;
        width: 100px;
        /*
         * table：设置当前元素为<table>元素
         * table-cell：设置当前元素为<td>（单元格）元素
         */
        display: table-cell;
        /*
         * 最初用于设置文本内容垂直方向的对齐方式
         * top：顶部对齐
         * middle：居中对齐
         * bottom：底部对齐
         */
        vertical-align: middle;
    }

    #child {
        background-color: #4492D0;
        height: 100px;
        width: 100px;
    }
</style>

优点：浏览器兼容性比较好

缺点：vertical-align具有继承性，导致父级元素内所有子级元素都垂直居中

CSS垂直居中布局解决方案二