display:table-cell实现水平垂直居中
<style> html,body{height: 100%;margin:0;padding:0;} /*** .table和.cell都将撑满页面,cell的子元素水平垂直居中 ***/ .table{ display: table; width: 100%; height: 100%; } .cell { display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #666; } </style> <div class="table"> <div class="cell"> <p>我爱你</p> <p>亲爱的中国</p> <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div> </div> </div>