📚 margin: 0 auto 水平居中原理 🤔

想要让一个元素在页面上实现水平居中？`margin: 0 auto;` 是你的最佳选择！但你知道它为什么能这么神奇吗？🧐

首先，这个属性适用于设置了宽度（width）的块级元素。当浏览器解析到 `margin: 0 auto;` 时，它会自动计算左右外边距为等值，从而使元素在其父容器内均匀分布，最终达到水平居中的效果。✨

举个例子：假设一个盒子宽度是 300px，父容器宽度是 800px，那么左右两边的外边距都会被设置成 250px（(800 - 300) ÷ 2）。这样，盒子就乖乖地待在了中间！🎯

不过要注意，`margin: 0 auto;` 只能实现水平方向的居中，垂直方向需要其他方法哦！💡

所以，下次再用到水平居中的时候，别忘了这个简单又强大的技巧！🙌

前端 CSS 技巧