2016年3月22日
让一个普通标签居中很容易，使用div {margin:0 auto}然后利用css可以自动计算元素左右的宽度就可以了
div {margin:0 auto;}
但是让一个浮动元素居中的话，却是无法通过这种形式居中的，因为浮动元素会自动跑到浮动的方向上的最边上，设置的外边框auto根本不起作用。
这时我们可以先把这个元素的位置设置为relative，这样的话就可以通过left属性来将它相对于父元素左边框的距离改为50%，当然这样还是不能实现水平居中的目标，因为元素有自己的宽度，所以将此元素的左外边距改为元素宽度的一半的负值，这样就可以实现元素水平居中了。使用同样的原理，我们可以实现垂直居中。但是垂直居中还有一个隐藏的坑：如果此元素的父元素为body的话，需要先将body的高度设置为100%，这样才能实现垂直居中，具体原理可以参考：全屏品字布局及height:100%的坑。
talk is cheap，here is the code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
margin: 0;
padding:0;
}
html , body {
height:100%;
}
.div {
width:200px;
height:100px;
background-color: pink;
float:left;
position:relative;
border:1px solid black;
margin:-50px 0 0 -100px;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div class = "div">
</div>
</body>
</html>
时间： 2024-12-23 21:40:48