思路是利用两个嵌套的div,外部div设置display为table属性,内部div设置display为table-cell属性,再借助text-align和vertical-align来实现水平和垂直居中。
例子:
<div style="display:table;width:500px;height:200px;padding:20px;background-color:#099;"> <div style="display:table-cell;background-color:#090;text-align:center;vertical-align:middle;"> 水平垂直居中 </div> </div>
效果如下:
评论