<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; }