效果展示:
方法很简单,将父盒子display:table,将里面的内容display:table-cell,还有就是要把body,html宽高也设置为100%,要不然盒子的高度会出现问题。
<body>
<div class="box"><span>box</span></div>
</body>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.box{
width: 50%;
height: 50%;
border: 1px skyblue solid;
text-align: center;
vertical-align: middle;
display: table;
}
.box span{
display: table-cell;
vertical-align: middle;
}