块级元素高度不固定实现垂直居中效果:
<div class="box">
<div class="box1">
茅檐低小,溪上青青草。
醉里吴音相媚好,白发谁家翁媪。
大儿锄豆溪东,中儿正织鸡笼,
最喜小儿无赖,溪头卧剥莲蓬。
</div>
</div>
<style type="text/css">
.box{
height: 500px;
background: #f8f8f8;
}
.box1{
position: relative;
top: 50%;
width: 300px;
padding: 50px;
background: #ccc;
transform: translateY(-50%);
}
</style>
效果如图所示: