1. 文字水平居中是 text-align: center
text-align: center;
2. 盒子水平居中 左右margin 改为 auto
2.1 必须是块级元素
2.2 盒子必须制定了width
.header {
960px;
margin: 0 auto;
}
3. 让定位position的盒子水平居中
原理和例子1看http://www.cnblogs.com/allen2333/p/9022252.html第8点
例子2. CSS3的tansform,也是基于上述原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: absolute;
200px;
height: 200px;
background-color: pink;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*translate 如果x -50% 跟父亲没关系,是走自己盒子宽度的一半*/
/*translate 如果y -50% 跟父亲没关系,是走自己盒子高度的一半*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>