居中艺术

就像任何优秀的韦斯·安德森电影一样，有时我们页面上的元素需要利用对称艺术并将用户的目光吸引到页面的中心。

有几种不同的方法可以实现这一点，所以在这里我将尝试解释现有的最简单、最有用的方法，以及它们为什么能做到这一点！

下面是一个快速的代码笔，展示了我将在下面讨论的方法：

自动边距

我们将从非常常见的开始margin: 0 auto。

这用于快速轻松地水平居中块级元素；这些元素是页面上始终从新行开始并占据其容器内可用全部宽度的元素。

这是一个非常有用的方法，因为许多 HTML 元素默认都是块级的，包括：

• <div>
• <h1>-<h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

解释一下margin: 0 auto：

0表示顶部和底部边距，
auto表示左侧和右侧边距。

由于块级元素占据了其容器的整个宽度，因此 auto 将为元素的左侧和右侧提供相等的边距 - 从而使其居中！

注意：除非您需要在元素的顶部和底部设置特定的边距，否则您可以轻松编写margin: auto，这将对元素的所有边应用自动边距，并且通常会实现相同的结果！

文本对齐

“等等，等等——我*好像*知道怎么让文本居中了！”我听到你说。你知道吗，它的text-align: center;用途远不止于此。

许多重要的 HTML 元素默认设置为内联显示，上述自动边距技巧对这些元素不起作用。这些元素包括：

• <textarea>
• <img>
• <input>
• <select>
• <button>

除此之外，您可能经常希望将诸如<div>显示之类的元素作为内联块来实现各种样式或布局目的，通常是当您想在该容器内的同一行上显示其他元素时。

当那个时候到来时，您需要做的就是text-align: center;在父元素上使用它，它就会水平居中子元素，无论它是什么，就像文本一样！

注意：与 相比display: inline，主要区别在于inline-block允许设置元素的宽度和高度，并且它支持边距和填充。尝试在 CodePen 中将显示更改为内联，看看两者之间的区别！

弹性盒子

在大多数情况下，Flexbox 是一种用于居中或定位元素的绝佳工具，但是在垂直、水平或两者居中元素时，人们可能会对使用哪些 flex 属性感到困惑！

原因是：这取决于你设置的flex-direction。解释一下：

如果您有一个容器设置为flex-direction: row（默认设置），那么您的主轴就是水平 x 轴，而您的横轴就是垂直 y 轴。

如果将此设置更改为flex-direction: column，则垂直 y 轴将成为主轴，水平 x 轴将成为交叉轴

这对于两个主要的居中属性很重要：

• justify-content:将元素定位在其主轴上
• align-items:将元素定位在其横轴上

通常，同时设置这两个属性center将始终使元素在弹性容器内居中，但为了实现完美定位，请务必记住这两个属性之间的主要区别！

如果容器是一行，并且你想让元素水平居中，就用justify-content！如果容器是列，并且需要水平居中，就用align-items。希望现在你已经完全理解了其中的原因！

网格

使用网格时，当查看整个页面时，事情会变得有点棘手，这取决于您可能设置的列数和行数，并且许多人会使用网格容器内的弹性框来使元素居中，但是我想分享一个非常快速而强大的技巧，用于完美地将元素置于网格容器内的中心。

除了为容器提供属性之外display: grid，只需添加属性place-items: center，这将使任何子元素保持完美居中。

在任何情况下，垂直和水平居中元素都是一个很好的选择！

绝对居中

我把我个人最喜欢的方案留到了最后，因为它灵活且功能强大。首先我先展示一下代码，之后我会进行解释：

.container {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

那么这里发生了什么？

首先，我们需要记住，每当我们想要使用absolute定位时，务必将父元素设置为position: relative。否则，子元素可能会根据整个文档主体进行定位。

然后我们使用top: 50%&left: 50%将子元素定位在其父元素的正中间点，但这意味着元素将仅从该点开始（因此基本上是 div 的左上角）。

为了解决这个问题，我们将transform: translate(-50%, -50%)其移回 x 轴和 y 轴的一半，以便它在其父元素内完美居中。

我喜欢这个的原因有两个：

首先，它很灵活 - 如果我们想让元素水平居中，那么我们只需使用left: 50%并使用translateX(-50%)- 反之亦然。

其次，它非常适合用 Sass/SCSS 创建实用的 mixin。例如，我在任何项目中都会用到以下这些 mixin，以便在需要时快速轻松地实现居中效果：

@mixin xCenter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

@mixin yCenter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@mixin absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

那么任何时候我们需要将一个元素完美地居中，我们只需使用@include absCenter，然后瞧！

我真的希望这对您有所帮助，如果您认为还有任何其他有用的提示、技巧或 CSS 魔法应该包含在内，请留言！