如何使用 4 种 Solid 方法在 CSS 中将项目居中对齐。

2025-05-24

如何使用 4 种 Solid 方法在 CSS 中将项目居中对齐。

居中对齐元素一直是 CSS 中经常讨论的话题。初学者，有时甚至是专业人士，在尝试在 CSS 中居中对齐文本或元素时，经常会搜索这个主题。

根据我的经验，自从我在 YouTube 视频中看到一个秘诀后，中心对齐对我来说就不再是问题了。

现在不要急着去 YouTube 搜索“欺骗将项目对齐到中心”。

你不会找到我找到的东西。我在这个视频的字里行间发现了这些骗局。这位 YouTuber 可能不记得他们提到过类似的东西。

从这个视频中，我发现 CSS 中的居中对齐项目完全取决于

  1. HTML 元素居中。
  2. 要居中的元素的父元素。

你要居中对齐哪种类型的元素？是块元素还是行内元素？

当居中对齐子元素时，应该设置哪个元素的样式，是父元素还是子元素本身？

这些元素（父元素和子元素）已经声明了哪些样式？如果有的话。

在 CSS 中，有多种方法可以居中对齐文本和元素，但并非所有方法都适用于所有元素，例如

将项目对齐到中心的常用方法之一是text-align: center;。现在在 div 元素和 span 元素上尝试此 CSS 声明。

您会注意到 span 元素没有移动到中心，这是因为元素的类型。

现在尝试添加display: block; text-align: center;该 span 元素。

你会注意到它成功移动到了中心。我敢肯定你现在一定很好奇为什么，但在此之前，我相信你可能会对“20+ 免费学习编码的地方”
感兴趣 。

在 CSS 中居中对齐项目的方法。

在我列出它们之前，有一种不常见的方法，开发人员可能常用来将项目居中对齐，即使用填充。

我不会这样做，也不会在这里说明，因为你不需要它。

1. text-align - 居中对齐文本

这text-align: center;是使文本水平居中对齐的一种非常常见的方法。

在这种情况下，我们将文本与父元素的中心对齐。

因此，该元素（现在是父元素）的宽度基本上无关紧要，里面的文本将绝对移动到该元素的中心。

这里是关于 text-align 的，它对齐元素中的所有文本。即使文本位于其他元素内，也无所谓。

例如，
HTML

<div class="parent">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

如果 div 中的文本位于另一个块元素内，例如

元素。它仍然会将文本居中对齐

HTML

<div class="parent">
  <p class="child">Hello World</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  text-align: center;
}
.child {
  border: 1px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

上面是将文本居中对齐，利用该text-align属性我们也可以将元素居中对齐。但这个元素必须是行内元素。

HTML

<div class="parent">
  <span class="child">Hello World</span>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  text-align: center;
  border: 2px solid red;
}
.child {
  border: 4px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

注意：我们不能将内联元素中的文本居中对齐。

此属性只能用于块元素。它不适用于内联元素，因为内联元素中的文本已经占据了元素的整个宽度和高度。那么，我们应该把它居中到哪里呢？

HTML

<span class="parent">
  Hello World
</span>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  text-align: center;
  border: 2px solid red;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

如果上面的文本被包裹在块元素中，它将居中对齐，但这会对父元素产生负面影响。所以不要这样做。

尽管如此，我们仍然可以将内联元素居中对齐到父元素（必须是块元素）的中心，如上所示。

简而言之，块元素可以使用 text-align 属性将其内部的任何文本或内联元素水平居中对齐到其中心。

你可能会问，如果我想让文本垂直居中怎么办？那么我建议使用下一个技巧。

嘿，既然您正在阅读这篇文章，我想您可能有兴趣了解购买用于编码的廉价笔记本电脑的要求。

2.边距——元素居中对齐。

margin: 0 auto;或声明margin: auto;将使元素水平对齐到父元素的中心。

此属性用于子元素。回想一下，子元素是我们想要与父元素的中心对齐的元素。

HTML

<div class="parent">
  <p class="child">Hello World</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  border: 2px solid red;
}
.child {
  width: 200px;
  margin: auto; /* or margin: 0 auto */
  border: 4px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

我们将子元素的宽度缩小为200px来看看margin: auto;效果的效果。

此外，要居中对齐的元素取决于其父元素。而要做到这一点，还取决于父元素和子元素的类型。

子元素必须是块元素。

并且父元素必须是块元素，子元素才能与其中心对齐。

如果父元素不是块元素，则子元素将与下一个父元素（即块元素）的中心对齐。

HTML

<body>
  <span class="parent">
    <p class="child">Hello World</p>
  </span>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  border: 2px solid red;
}
.child {
  width: 200px;
  margin: auto; /* or margin: 0 auto */
  border: 4px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

在上面的代码中，下一个父元素是body块元素。

我们一直在做的是将项目水平对齐到中心，通过该margin属性我们也可以垂直对齐。

HTML

<body>
  <span class="parent">
    <p class="child">Hello World</p>
  </span>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  border: 2px solid red;
}
.child {
  width: 200px;
  margin: 100px auto; /* moves 100px from the top and bottom of the parent element */
  border: 4px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

注意：如果为父元素设置了高度，则上述示例将不再按预期工作。

仅为子元素设置高度仍将完美地使元素水平和垂直居中对齐。

简而言之，子元素（块元素）可以使用该margin属性将元素垂直且主要水平地对齐到父元素（应该是块元素）的中心。

你可能会问，如果我想设置父元素的高度，同时让子元素居中对齐到父元素的中心，该怎么办？我建议使用下一个技巧。

关于居中行内元素的快速提示。

如果您想知道如何使用text-align属性和margin属性将内联元素居中对齐，只需将其设置为具有display属性的块元素即可。即

.some-inline-element {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

3. Flexbox – 居中对齐元素和文本。

Flexbox 是使元素或文本居中对齐的可靠方法之一，但如果您的 HTML 元素定位不佳，您最终可能会感到沮丧。

该display: flex;声明适用于默认块和内联元素，因为它将该元素更改为弹性框。

如果您不熟悉 Flexbox，我建议您阅读教程，它有点广泛，所以我们不会在本文中解释它的每个方面。

使用 Flexbox 将文本居中对齐。

弹性框元素可以将其中的文本水平对齐到其中心。

但是您应该注意，此元素的宽度 - flexbox 元素（包含文本）相对于最近的父元素（即块元素）的宽度是绝对的。

HTML

<body>
 <div class="parent">Hello World</div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  width: 50%; /* will take up 50% of device's screen */
  border: 2px solid red;
}
.parent {
  display: flex;
  justify-content: center; /* used to center align horizontally */
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

为了清楚起见，whendisplay: flex;用于任何类型的元素：

  1. 首先，它将该元素转换为 flexbox 元素。

  2. 该 flexbox 元素内的文本与 flex 元素的中心对齐，其justify-content: center;属性和值

  3. 最后，弹性盒元素的宽度取决于其最近的父元素（即块元素）的宽度。因此，如果其父元素的宽度是设备宽度的 50%，则弹性盒元素的宽度将是其父元素宽度的 100%。默认情况下会这样。

嘿，你想看我使用 JavaScript 类制作 NoSQL 数据库克隆吗？

使用 flexbox 将文本垂直对齐到中心。

要垂直对齐，您只需指定 flex 元素的高度，然后使用该align-items属性将文本垂直对齐到中心。

HTML

<body>
 <div class="parent">Hello World</div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  width: 50%; /* will take up 50% of device's screen */
  border: 2px solid red;
}
.parent {
  height: 300px
  display: flex;
  justify-content: center; /* used to center align horizontally */
  align-items: center; /* used to center align vertically */
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

默认情况下，弹性盒元素的高度不依赖/继承自父元素。你可以height:inherit在弹性盒元素上使用 来使其继承。

使用 Flexbox 将元素居中对齐

当display: flex;在元素上使用时，每个子元素都将转换为内联块元素。

HTML

<body>
  <div class="parent">
    <span class="child">Hey World 1</span>
    <div class="child">Hey World 2</div>
    <span class="child">Hey World 3</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  display: flex;
  justify-content: center;
  border: 2px solid red;
}
.child {
  padding: 100px 22px;
  margin: 3px;
  border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
CSS 中的居中对齐项目 - 示例 9

当将多个元素居中对齐到 flex 元素的中心时，用任意元素（块或内联）包裹这多个元素。

HTML

<body>
  <div class="parent">
    <div class="child-wrapper">
      <span class="child">Hey World 1</span>
      <div class="child">Hey World 2</div>
      <span class="child">Hey World 3</span>
    </div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  display: flex;
  justify-content: center;
  border: 2px solid red;
}
.child {
  margin: 3px;
  border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
CSS 中的居中对齐项目 - 示例 10

如果不换行，元素就会水平堆叠在一起，并且仍然与中心对齐，即

HTML

<body>
  <div class="parent">
    <span class="child">Hey World 1</span>
    <div class="child">Hey World 2</div>
    <span class="child">Hey World 3</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  display: flex;
  justify-content: center;
  border: 2px solid red;
}
.child {
  margin: 3px;
  border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
CSS 中的居中对齐项目 - 示例 11

同样，默认情况下，弹性盒元素的宽度取决于其父元素（即块元素），而高度则不受其影响。

为了使 flexbox 元素中的元素垂直居中对齐，我们将为 flexbox 元素指定高度以及align-items属性

HTML

<body>
  <div class="parent">
    <span class="child">Hey World 1</span>
    <div class="child">Hey World 2</div>
    <span class="child">Hey World 3</span>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  height: 300px;
  display: flex;
  justify-content: center;
  border: 2px solid red;
}
.child {
  margin: 3px;
  border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

height: inherit;您还可以继承为 flexbox元素声明的flexbox 元素的父元素的高度。

简而言之，内联或块元素（作为父元素）可以使用该display属性将文本或元素垂直和水平对齐到其中心。

4. 定位和变换——元素和文本居中对齐。

位置属性也是居中对齐元素的好方法。我主要在创建固定元素或下拉菜单时使用它。

在这种格式中，您需要实际设置父元素和子元素的样式 - 将其放置在父元素的中间。

父元素需要在 CSS 中显示它是您希望子元素位于中间的元素，您可以通过将父元素的position属性设置为fixed或来显示这一点relative。

HTML

<body>
  <div class="parent">
    <some-element>Some text</some-element>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

子元素需要设置absolute为父元素的位置。这意味着子元素的宽度、高度和位置现在都依赖于父元素。

HTML

<body>
  <div class="parent">
    <p class="child">Hello World</p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  position: relative;
}
.child {
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们尝试将其居中对齐。我们使用子元素上的position属性和transform属性来实现：

HTML

<body>
  <div class="parent">
    <p class="child">Hello World</p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  position: relative;
  height: 100px;
  border: 2px solid red;
}
.child {
  position: absolute;
  left: 50%; /* adjusts the element 50% from the left */
  transform: translateX(-50%); /* horizontally re-adjusts the element to the center */
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

如果您熟悉翻译值，您就会知道第一个参数水平定位元素，另一个参数垂直定位元素。

HTML

<body>
  <div class="parent">
    <p class="child">Hello World</p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
  position: relative;
  height: 100px;
  border: 2px solid red;
}
.child {
  position: absolute;
  left: 50%; /* adjusts the element 50% from the left */
  top: 50%; /* adjusts the element 50% from the top */
  transform: translate(-50%, -50%); /* horizontally & vertically re-adjusts the element to the center */
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

这就是在 CSS 中将元素或文本垂直或水平居中的四种不可或缺的方法。

用例

让我们在网页上实际使用它。在本节中，我们将尝试上面列出的每种情况，尝试将包含文本的元素居中对齐。

注意：请记住，无论我在本文中指定或可能指定的元素是什么，它实际上都包括所有元素，如图像、输入。

你也应该记住，我们在例子中解释了为什么有些元素因为是内联元素而无法居中对齐。我已经说过，解决方案就是不要将其设置为内联。

我们做点什么吧……

假设我们有一个想要固定在网页顶部的标题，并且在这个标题中，将有一个 h1 元素，其中包含我们网页的名称。

<header>
  <h1>Dashboard</h1>
</header>
Enter fullscreen mode Exit fullscreen mode

现在我们想要将 h1 元素居中对齐。该怎么做呢？

首先，让我们将页眉固定并添加边框。

header {
  position: fixed;
  border: 4px solid orange;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们将文本居中对齐，因为父元素是固定的，我通常只会将 h1 设为绝对，然后使用 transform 属性将其居中对齐。

但为了本教程的目的，让我们尝试所有列出的技巧。

1.尝试center-align在父元素（标题元素）上使用该属性：

我会尝试这样做，因为父元素是一个块元素，而子元素也是一个包含我们想要居中对齐的文本的块元素。

你觉得怎么样？会起作用吗？当然会。如果你现在试试，它会起作用，但不会反映出来。

这是因为默认情况下，当我们指定一个元素的位置固定时，该元素的宽度会减小到其中文本的宽度。

header {
  position: fixed;
  border: 4px solid orange;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

我们现在要做的是让它有完整的宽度

header {
  position: fixed;
  right: 0;
  left: 0;
  border: 4px solid orange;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

现在它可以按预期工作了。

您可能对如何在 2021 年成为 Web 开发人员感兴趣。

2. 尝试margin在 h1 元素上使用该属性：

我会尝试这个，因为它满足边距属性的条件，即父元素是块，子元素是块元素。

header {
  position: fixed;
  right: 0;
  left: 0;
  border: 4px solid orange;
}
h1 {
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

虽然我们的网页满足条件，但仍然不起作用，这可能是因为位置属性。

3.尝试在父元素（标题元素）上使用 flexbox：

header {
  position: fixed;
  right: 0;
  left: 0;
  border: 4px solid orange;
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

这会像预期的那样顺利进行。

4.尝试在 h1 元素上使用position和transform属性：

header {
  position: fixed;
  right: 0;
  left: 0;
  border: 4px solid orange;
  height: 80px;
}
h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
Enter fullscreen mode Exit fullscreen mode

结果
在 CSS 中居中对齐项目

它工作正常，因为父元素已经显示它是父元素，因此子元素只需要移动到其父元素（或母元素）的中心。

这是一个非常基本的网页，复杂的页面或部分可能并不总是像这样结束 - 三种情况完美地发挥作用。

但无论哪种情况，试着始终这样思考：它是否满足文本对齐条件？如果不满足，则移动到下一个。就像这样。

因此，您无需先尝试看看它是否能够居中对齐，只需用大脑来判断它是否能够工作即可。

结论：
有了这篇文章，CSS 中居中对齐元素或文本对你来说应该不再是问题。我建议你现在就练习，不仅可以从零开始练习，还可以从问题开始练习。

转到GitHub，使用框架进行居中对齐的项目，在其上使用这些原则。

好吧，如果你想纠正我，告诉我一些事情，请给我留言。如果你喜欢这篇文章，请尽可能多地与 CSS 爱好者分享，我相信他们能从中学到一两点东西。

另外，如果你想支持我的博客之旅，希望我继续更新，你可以成为我的赞助人，或者请我喝杯咖啡。谢谢你，祝你造型愉快。

文章来源：https://dev.to/elijahtrillionz/how-to-center-align-items-in-css-with-4-solid-methods-31c3
Devto 翻译
PREV
useReducer TypeScript React Context 与 useReducer 和 Typescript。
NEXT
优化开发者博客的图片