margin-left: auto元素右对齐以及margin: 0 auto水平居中的原理 #74

TieMuZhen · 2021-12-22T07:50:50Z

一、margin-left: auto;元素右对齐

要实现上述右对齐的方式有很多，比如：

flex设置justify-content: flex-end
absolute定位设置rigth: 0
float: right
当父节点和子节点宽度固定时，设置margin-left: auto
…

前面三个方法的都好理解，第四个方法相信会让不少人困惑，但它确确实实可以实现，示例如下：

<html>
<head>
  <style>
    .right {
      margin-left: auto;
      width: 100px;
      height: 50px;
      background-color: #f00;
    }
    .box {
      width: 400px;
      border: 1px solid #000
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="right"></div>
  </div>
</body>
</html>

二、margin: 0 auto;水平居中

要实现上述水平居中的方式有很多，其中有一种方式就是在固定宽度时，使用margin: 0 auto可以实现水平居中，想必使用这个方法的时候也会困扰一会。

<html>
<head>
  <style>
    .middle {
      margin: 0 auto;
      width: 100px;
      height: 50px;
      background-color: #0f0;
    }
    .box {
      width: 400px;
      border: 1px solid #000
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="middle"></div>
  </div>
</body>
</html>

三、原理

块级元素中auto属性的计算特性

节点元素满足等式：'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block，除width以外，等号左侧属性的默认值为0。
当且仅当其中某一个属性为auto（计算属性）时，这个auto值就是令等式成立的值。
最后一条，当margin-left和margin-right都为auto时，两者就会一样，从而使元素居中

参考文献

auto的原理

The text was updated successfully, but these errors were encountered:

TieMuZhen added the CSS label Dec 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

margin-left: auto元素右对齐以及margin: 0 auto水平居中的原理 #74

margin-left: auto元素右对齐以及margin: 0 auto水平居中的原理 #74

TieMuZhen commented Dec 22, 2021 •

edited

Loading

margin-left: auto元素右对齐以及margin: 0 auto水平居中的原理 #74

margin-left: auto元素右对齐以及margin: 0 auto水平居中的原理 #74

Comments

TieMuZhen commented Dec 22, 2021 • edited Loading

一、margin-left: auto;元素右对齐

二、margin: 0 auto;水平居中

三、原理

参考文献

TieMuZhen commented Dec 22, 2021 •

edited

Loading