方法一:CSS 实现居中(不足:需要提前知道元素的宽度和高度)
- .box{
- width:600px;
- height:400px;
- position:absolute;
- left: 50%;
- top: 50%;
- margin-left: -200px;
- margin-top: -300px;
- }
方法二:css3 实现水平垂直居中(无论元素的尺寸是多少,都可以居中,不过只支持 IE8 以上的浏览器,移动端可忽略)
- .box{
- width:600px;
- height:400px;
- position:absolute;
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
- }
方法三:auto 实现居中
- .box{
- width:600px;
- height:400px;
- left:0;
- top:0;
- right:0;
- bottom:0;
- margin:auto;
- }
来源: http://www.bubuko.com/infodetail-1966027.html