实现元素水平和垂直居中的问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位和居中问题</title>
</head>
<style>
*{margin:0;padding:0;}
.box{width:400px;height:200px;background:#ccc;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-100px;z-index:999px;}
.box span{display:block;width:50px;height:50px;background:#fc0;position: absolute;}
.box_top{left:0;top:0;z-index:1;border-radius:0 0 50px 0;}
.box_bottom{right:0;bottom:0;border-radius:50px 0 0 0;}
</style>
<body>
<div class="box">
<span class="box_top"></span>
<span class="box_bottom"></span>
</div>
</body>
</html>

posted @ 2016-12-12 15:17  天--安静  阅读(88)  评论(0)  编辑  收藏  举报