1、前言
最近在使用postcss-center的时候，不理解css水平居中为什么需要“margin-right：-50％”。
margin-right：-50％
所以给作者commit了一个Issues
commit了一个Issues
根据作者提供的链接，才弄清楚这个细节，特此记录一下。
2、为什么水平居中需要 margin-right: -50%;?
-
细节问题展示
首先创建一个test.html
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
/*margin-right: -50%;*/
transform: translate(-50%, -50%) }
</style>
<section>
<h1>Nicely centered</h1>
<p>This text block is vertically centered.
<p>Horizontally, too, if the window is wide enough.
</section>
<html/>
打开test.html，尝试调整窗口大小到最窄。
打开test.html，尝试调整窗口大小到最窄。
注释margin-right: -50%;
注释margin-right: -50%;
刷新浏览器test.html
刷新浏览器test.html
-
细节分析
原理分析
'left: 50%'将元素的可用宽度减少50％。因此，渲染器将尝试渲染不超过容器宽度一半的宽度。通过'margin-right: -50%'元素的右边距在右边相同的数量，渲染最大宽度再次与容器的宽度相同。
结果分析
当尝试调整窗口大小时，窗口宽度足够宽的时候，您会看到每个句子都在一行上。只有当整个句子的窗口太窄时，句子才能被分割成几行。
当您将窗口宽度调整是文本行的两倍宽度时
- 'margin-right：-50％'未被注释，您会看到每个句子都在一行上
- 'margin-right：-50％'被注释，句子被分割成几行。
3、最后
如果有什么疑问，可以在下面评论或者私信我。
如果您觉得有帮助，请给我点个👍，谢谢。
网友评论