即使使用 CSS Grid 和 Flexbox 等有用的工具，在 CSS 中居中元素仍然是众所周知的挑战。当你成功地将某些东西居中时，你会想要向朋友展示它。

为什么居中 CSS 元素如此困难

CSS 可能很难使用。例如，如果你尝试水平或垂直对齐某物，这并不难。你可以将内联元素的 text-align 设置为居中，而 margin: 0 auto 将用于块级元素。

但是，如果你尝试将垂直和水平对齐方式结合起来，则会在多个方面出现问题。

在本教程中，我将向你介绍三种在 CSS 中正确居中 div、文本或图像的不同方法。

如何使用 CSS Position 属性将元素居中

CSS position 属性的值可能是 relative、absolute、fixed 或 static（默认值）。设置这些值之后，你将能够把顶部、右侧、底部和左侧属性应用于元素。

相对值和绝对值的组合可以完成很多事情，因此你可以使用它来居中任何事物。

看看下面的代码示例。

如何使用 CSS 定位居中文本

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
ss1b

如何使用 CSS 定位居中图像

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
ss2b

上面的代码使文本和图像垂直居中。为了兼顾垂直和水平居中，我们需要在 CSS 中做一些调整。我们将 top 属性设置为 50%，在 X 轴和 Y 轴上添加一个 transform。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

文本显示如下：

ss4b

图像显示如下：

ss3b

请注意，我应用了 transform 属性是因为子元素（具有名为 “centered-element” 的 class）略微偏离中心。translateY() 将它垂直推到中心，并在 X 和 Y 轴上平移 （translate()）将它垂直和水平推到中心。

如何在 CSS 中使用 Flexbox 居中元素

CSS Flexbox 处理一维（行或列）的布局。使用 Flexbox，只需三行代码就可以很容易地将 div、文本或图像居中。

请看下面的代码示例。

如何用 Flexbox 居中文本

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}
ss5b-1

如何用 Flexbox 居中图像

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}
ss6b

我们用短短的两行代码实现垂直对齐。为了使图像和文本水平居中，添加 justify-content: center。

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, I'm now vertically and horizontally centered</p>
    </div>
</div>

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border: 2px solid #006100;
}

文本显示如下：

ss7bb

图像显示如下：

ss11bb

如何使用 CSS Grid 居中元素

使用 Flexbox，可以很容易地将任何东西居中，对吧？使用 CSS Grid 居中元素也很容易，两行代码就够了。

如何用 CSS Grid 居中文本

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}
ss8bb

如何用 CSS Grid 居中图像

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

上面的示例为你处理了垂直居中的问题。要使文本和图像也水平居中，请将 align-items 替换为 place-items——align-items 和 justify-content 的结合：

.container {
    display: grid;
    place-items: center;
    height: 600px;
    border: 2px solid #006100;
}

文本显示如下：

ss7bb-1

图像显示如下：

ss11bb-1

如何在 CSS 中将独立的 Div、文本或图像居中

上面的三种方法可以让你在容器中居中放置一个 div、文本或图像。你还可以将独立的 div、文本或图像居中。

现在让我们看看如何做到这一点。

如何在 CSS 中居中独立的 div

<div class="container"></div>

div.container {
    height: 300px;
    width: 300px;
    border: 2px solid #006100;
    margin: 0 auto;
  }
ss12bb

如何在 CSS 中居中独立的文本

<p>I'm a Camper, and I'm centered</p>

     p {
         text-align: center;
     }
ss13bb

如何在 CSS 中居中独立的图像

<img src="freecodecamp.png" alt="centered" />

img {
      display: block;
      margin: 0 auto;
 }
 /* Applies a display of block, a margin 0f 0 at the top and bootom, 
 and auto on the left and right */
ss14bb

总结

我希望这篇教程为你提供了有关垂直对齐以及如何在 CSS 中居中元素的足够知识，这样你在下一个项目中用到它们时就不会困惑了。

感谢你阅读本文。

原文：CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]，作者：Kolade Christopher Kayode