本文解释了如何通过CSS使行内级元素（如inline-block）水平居中，以及块级元素使用`margin:0auto`和绝对定位时的居中计算原理，重点讨论了子元素宽度对父元素居中的影响以及垂直居中的处理方式。
- 行内级元素（包含inline-block）
- 水平居中：在父元素中设置text-align:center;
- 块级元素
- margin:0 auto;
- 绝对定位元素的水平和垂直居中
父元素宽度的公式：父元素宽度 = 子元素宽度 + left + right + margin-left + margin-right
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
body {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 800px;
height: 300px;
margin: 100px auto;
background-color: #f00;
}
.box .container {
width: 300px;
height: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
background-color: green;
}
如上述代码，当子元素container的宽度为300
父元素box 800 = 300 + 0 + 0 + auto + auto，所以会居中显示，
那么，子元素的垂直居中？
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
