vertical-align垂直居中

    <div id="content">
        <div id="weizi">
            锄禾日当午，<br>
            汗滴禾下土。<br>
            谁知盘中餐，<br>
            粒粒皆辛苦。<br>
        </div>
    </div>

        #content{
            width: 300px;
            height: 300px;
            border: #000 solid 1px;
            margin: auto;
        }
        #weizi{
            border: #000 solid 1px;
            text-align: center;
            vertical-align: middle;
        }

单独写vertical-align: middle不会有垂直居中的效果

例：

        #con::before{
            content: "";
            width: 25px;
            height: 25px;
            background: url(camera.png) no-repeat;
            background-size: 25px 25px;
            display: inline-block;
            vertical-align: middle;
            margin: -1px 5px 5px 5px;
        }
        #con::after{
            content: "";
            width: 25px;
            height: 25px;
            background: url(search.png) no-repeat;
            background-size: 25px 25px;
            display: inline-block;
            vertical-align: middle;
            margin: -1px 5px 5px 5px;
        }

这个之所以有效果因为vertical-align:middle;配合display: inline-block;使用。

我们发现只有表格的时候垂直居中是管用的，只需在子元素加一个display:table-cell;表格单元格显示，父元素加display:table;

        #content{
            width: 300px;
            height: 300px;
            border: #000 solid 1px;
            margin: auto;
            display: table;
        }
        #weizi{
            border: #000 solid 1px;
            text-align: center;
            vertical-align: middle;
            display:table-cell;
        }