css3中水平居中的一个你可能不知道的细节

2017-09-08 本文已影响102人码农随想录

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，尝试调整窗口大小到最窄。

注释margin-right: -50%;

刷新浏览器test.html

细节分析

原理分析

'left: 50%'将元素的可用宽度减少50％。因此，渲染器将尝试渲染不超过容器宽度一半的宽度。通过'margin-right: -50%'元素的右边距在右边相同的数量，渲染最大宽度再次与容器的宽度相同。

结果分析

当尝试调整窗口大小时，窗口宽度足够宽的时候，您会看到每个句子都在一行上。只有当整个句子的窗口太窄时，句子才能被分割成几行。
当您将窗口宽度调整是文本行的两倍宽度时

'margin-right：-50％'未被注释，您会看到每个句子都在一行上
'margin-right：-50％'被注释，句子被分割成几行。

3、最后

如果有什么疑问，可以在下面评论或者私信我。
如果您觉得有帮助，请给我点个👍，谢谢。