有两种方式:
直接上代码:使用定位对div元素进行水平垂直居中,效果如下:
第一种:
<style type="text/css">
*{margin:0;padding:0;}
.box{width:200px;height:200px;background:red;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
这样明显没有居中,原因是使用left:50%,top:50%;是对其左上角进行居中,现在使用margin-top:-100px;margin-left:-100px;就OK了(就是针对其对角线交点居中)。
第二种:
这种方法就是对top:0;right:0;bottom:0;left:0;在使用margin:0 auto;也可以进行水平垂直居中。