Skip to main content

理解 margin:auto

水平居中​

  • 如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
  • 如果两侧均是 auto，则平分剩余空间。
Loading Github Gist ...
块级元素的右对齐

由于 CSS 世界中 margin 的初始值大小是 0，因此，如果 margin-right 缺失，实现的效果正好是块级元素的右对齐效果。

所以，如果想让某个块状元素右对齐，脑子里不要就一个 float: right，很多时候，margin-left: auto; 才是最佳的实践，浮动毕竟是个"小魔鬼"。我甚至可以这么说：margin 属性的 auto 计算就是为块级元素左中右对齐而设计的，和内联元素使用 text-align 控制左中右对齐正好遥相呼应！

垂直居中​

为什么明明容器定高、元素定高，直接设置 margin: auto; 却无法垂直居中？

元素水平方向自动填充为父元素宽度，垂直方向无法自动填充，默认为零，所以垂直方向设置 margin: auto; 无法居中.

原因在于触发 margin: auto; 计算有一个前提条件，就是 width 或 height 为 auto 时，元素是具有对应方向的自动填充特性的。比方说这里，假如说把.son 元素的 height:100px 去掉，.son 的高度会自动和父元素等高变成 200px 吗？显然不会！因此无法触发 margin: auto; 计算，故而无法垂直居中。

实现垂直居中：

  • 使用 writing-mode 改变文档流的方向

    • 使用 writing-mode: vertical-lr; 改变文档流的方向，使得元素的垂直方向自动填充为父元素高度；
    • 使用 margin: auto; 垂直居中。
    • 但是这也带来另外的问题，就是水平方向无法 auto 居中了。

  • 绝对定位元素的 margin: auto; 居中（绝对定位元素的格式化高度即使父元素 height: auto; 也是支持的）

    • 使用 position: absolute; 绝对定位元素；
    • 然后设置 top: 0; right: 0; bottom: 0; left: 0;，格式化宽度和格式化高度；
    • 使用 margin: auto; 居中。
Loading Github Gist ...

参考​