1.translate定位 这是css3 transform的属性 ,可以将宽高度设为百分比 IE browser<IE9不支持 在移动端使用较好
html代码:
<div class="translateCenter">我是translate居中定位</div>
css代码:
<style>
*{margin:0;padding:0}
.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
</style>
2.margin居中定位 不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 神来之笔 IE browser< IE 8不支持
html代码:
<body> <div class="marginCenter">我是margin居中定位</div> </body>
css代码:
<style> *{margin:0;padding:0} .marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;} </style>