标签：
话不多说,直接上代码。
1 <div style="display: table-cell;text-align: center;vertical-align: middle;padding:50px;border:1px solid #ccc;"> 2 <div style="height: 100px;line-height:100px;width: 100px;background-color: #ccc;text-align: center;">Hello World!</div> 3 </div>
效果如下:
主要是利用了display: table-cell;这个属性,实现水平垂直居中。
未知宽高div水平垂直居中
<div style="position: relative;padding:100px;border:1px solid #ccc;margin: 0 auto;text-align: center;vertical-align: middle;"> <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);">这里是内容</div> </div>
利用css3的transform实现的水平垂直居中。
标签：
原文地址：http://www.cnblogs.com/Sung18/p/5034410.html
