即使使用 CSS Grid 和 Flexbox 等有用的工具，在 CSS 中居中元素仍然是众所周知的挑战。当你成功地将某些东西居中时，你会想要向朋友展示它。
为什么居中 CSS 元素如此困难CSS 可能很难使用。例如，如果你尝试水平或垂直对齐某物，这并不难。你可以将内联元素的 text-align 设置为居中，而 margin: 0 auto 将用于块级元素。
但是，如果你尝试将垂直和水平对齐方式结合起来，则会在多个方面出现问题。
在本教程中，我将向你介绍三种在 CSS 中正确居中 div、文本或图像的不同方法。
如何使用 CSS Position 属性将元素居中CSS position 属性的值可能是 relative、absolute、fixed 或 static（默认值）。设置这些值之后，你将能够把顶部、右侧、底部和左侧属性应用于元素。
相对值和绝对值的组合可以完成很多事情，因此你可以使用它来居中任何事物。
看看下面的代码示例。
如何使用 CSS 定位居中文本
I'm a Camper, and I'm vertically centered
* {
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%);
}
如何使用 CSS 定位居中图像
* {
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%);
}
上面的代码使文本和图像垂直居中。为了兼顾垂直和水平居中，我们需要在 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%);
}
文本显示如下：
图像显示如下：
请注意，我应用了 transform 属性是因为子元素（具有名为 “centered-element” 的 class）略微偏离中心。translateY() 将它垂直推到中心，并在 X 和 Y 轴上平移 （translate()）将它垂直和水平推到中心。
如何在 CSS 中使用 Flexbox 居中元素CSS Flexbox 处理一维（行或列）的布局。使用 Flexbox，只需三行代码就可以很容易地将 div、文本或图像居中。
请看下面的代码示例。
如何用 Flexbox 居中文本
I'm a Camper, and I'm vertically centered
.container {
display: flex;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
如何用 Flexbox 居中图像
.container {
display: flex;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
我们用短短的两行代码实现垂直对齐。为了使图像和文本水平居中，添加 justify-content: center。
I'm a Camper, I'm now vertically and horizontally centered
.container {
display: flex;
align-items: center;
justify-content: center;
height: 600px;
border: 2px solid #006100;
}
文本显示如下：
图像显示如下：
如何使用 CSS Grid 居中元素使用 Flexbox，可以很容易地将任何东西居中，对吧？使用 CSS Grid 居中元素也很容易，两行代码就够了。
如何用 CSS Grid 居中文本
I'm a Camper, and I'm vertically centered
.container {
display: grid;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
如何用 CSS Grid 居中图像
.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;
}
文本显示如下：
图像显示如下：
如何在 CSS 中将独立的 Div、文本或图像居中上面的三种方法可以让你在容器中居中放置一个 div、文本或图像。你还可以将独立的 div、文本或图像居中。
现在让我们看看如何做到这一点。
如何在 CSS 中居中独立的 div
div.container {
height: 300px;
width: 300px;
border: 2px solid #006100;
margin: 0 auto;
}
如何在 CSS 中居中独立的文本
I'm a Camper, and I'm centered
p {
text-align: center;
}
如何在 CSS 中居中独立的图像
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 */
总结我希望这篇教程为你提供了有关垂直对齐以及如何在 CSS 中居中元素的足够知识，这样你在下一个项目中用到它们时就不会困惑了。
感谢你阅读本文。
原文：CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]，作者：Kolade Christopher Kayode