本文详细解释了如何使用CSS的position属性（absolute和fixed）以及margin:0auto来实现元素的垂直和水平居中，包括非定位元素和定位元素的情况，并强调了在开发中的精确编码原则。
一、将 position 设置为 absolute/fixed 元素的特点（中）
绝对定位元素定位参照对象的宽和高
首先先说结论，对于绝对定位元素来说有这样两个公式：
- 定位参照对象的宽度 =
绝对定位元素的实际占用宽度(自身的宽度 width)+left+right+margin-left+margin-right - 定位参照对象的高度 =
绝对定位元素的实际占用高度(自身的高度 height)+top+bottom+margin-top+margin-bottom
根据这两个公式我们就可以实现垂直和水平居中。
非定位元素的居中
对于绝对元素及其定位参照对象来说，绝对定位元素的参照元素肯定是绝对定位元素的父级元素，首先创建一个 HTML 页面，包含两个嵌套的盒子，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 300px;
background-color: #f00;
}
.box .container {
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>
在浏览器中打开该 HTML 页面，具体效果如下：
可以看到绿色盒子 div.container 是块级元素，默认会占据整行，给绿色盒子 div.container 设置宽度为 200px，具体代码如下：
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
}
刷新浏览器，效果如下：
现在有一个问题 – 如何让绿色的盒子居中？
要让绿色盒子居中，我们可以设置 margin: 0 auto; 来实现，具体代码如下：
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
}
刷新浏览器，效果如下：
此时绿色盒子已经居中了，为什么设置为 margin: 0 auto; 就居中了？
此时红色盒子和绿色盒子都没有设置定位，还不是定位元素，但是此时的公式如下：
红色盒子的宽度 = 绿色盒子宽度 + margin-left + margin-right
也就是说：
800 = 200 + auto + auto
此时 auto 自动分配的值为 300px，并且此时没有设置定位 left 和 right 都为 0，因此左右两个外边距相等，这就实现了居中。
定位元素水平居中
如果把红色盒子和绿色盒子设置为子绝父相的情况呢？
把 div.box 设置为 position: relative；把 div.container 设置 position: absolute，具体代码如下：
.box {
width: 800px;
height: 300px;
background-color: #f00;
position: relative;
}
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
/*先注释 margin*/
/*margin: 0 auto;*/
position: absolute;
}
刷新浏览器，效果如下：
此时绿色盒子已经是定位元素，我们就可以套用上面的公式了，定位参照对象 div.box 也就是红色盒子的宽度为 800px 就等于绝对定位元素 div.container 也就是绿色盒子的自身宽度 200px 加上值为 auto 的 margin-left 再加上 值为 auto 的 margin-right 再加上 偏移量 left 和 right，公式如下：
div.box 的宽度 = div.container 的宽度 + left + right + margin-left + margin-right
此时我们设置 left: 0; right: 0 并且注释掉宽度 width，具体代码如下：
.box .container {
/* width: 200px; */
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
position: absolute;
left: 0;
right: 0;
}
那么根据刚才的公式，会发生什么现象？
div.box 的宽度 = div.container 的宽度（auto） + 0 + 0 + 0 + 0
此时 div.container 的宽度就是父元素 div.box 的宽度，也就是 800px，绿色盒子会占据父元素整行，刷新浏览器，效果如下：
此时子元素绿色盒子 div.container 就完全占据了父元素 div.box 的整行。
要想达到同样的效果我们可以设置子元素 div.container 的 width 为 100%，具体代码如下：
.box .container {
/* width: 200px; */
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
width: 100%;
position: absolute;
/* left: 0; */
right: 0;
}
刷新页面，效果如下：
原理是一样的，都是同一个公式。
那么假如在绝对定位的情况下给一个绿色盒子 div.container 的宽度为一个指定的值，如 200px，具体代码如下：
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
/* margin: 0 auto; */
/* width: 100%; */
position: absolute;
left: 0;
right: 0;
}
此时的计算公式就是：
800 = 200 + 0 + 0 + 0 + 0
这肯定是不对的，所以默认情况下会把差的值 600px 给到 margin-right，也跟原来所在的位置有一点关系，具体摆放位置由浏览器来决定，可能会给左边多一点也可能会给右边多一点。
刷新浏览器，效果如下：
在开发过程中我们要尽量不要让这种不确定性的代码出现，一定要写准确的代码，摆放位置由自己来决定，而不是让浏览器来决定。
还有一种情况就是如果设置 margin：0 auto; 并且在 left: 0; right: 0 的情况下，此时也可以水平居中，具体代码如下：
.box .container {
width: 200px;
height: 100px;
background-color: #0f0;
margin: 0 auto;
/* width: 100%; */
position: absolute;
left: 0;
right: 0;
}
刷新浏览器，效果如下：
此时的公式就是
800 = 200 + 0 + 0 + auto + auto
margin-left 和 margin-right 为 auto 的情况下，浏览器分配的具体的值为 300px，实现了居中。
对于定位元素想要在它的包含块中居中，通过这样的方式来实现。
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
