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;

        }