如何在 CSS 中实现完美居中：垂直和水平

在 CSS 中实现元素居中是一种常见的需求，无论是文本、图像还是块级元素。然而，这可能是一个挑战，特别是对于初学者来说。本指南将详细介绍如何在 CSS 中实现完美居中，涵盖垂直和水平居中的技术。

水平居中

使用 text-align: center;（文本）

对于文本元素，使用 text-align: center; 属性可以轻松实现水平居中。

p {
  text-align: center;
}

使用 margin: 0 auto;（块级元素）

对于块级元素，使用 margin: 0 auto; 属性可以实现水平居中。它将元素的左、右边距设置为自动，有效地将它居中在可用的空间中。

div {
  margin: 0 auto;
}

使用 Flexbox

Flexbox 提供了一种灵活的方法来控制元素的布局，包括居中。通过设置 justify-content: center;，可以水平居中元素。

.container {
  display: flex;
  justify-content: center;
}

垂直居中

使用 line-height: 100vh;（单行文本）

对于单行文本，使用 line-height: 100vh; 属性可以实现垂直居中。它将文本行的行高设置为视口高度，从而将其垂直居中。

h1 {
  line-height: 100vh;
}

使用 margin: 0 auto;（垂直块级元素）

对于垂直块级元素，使用 margin: 0 auto; 属性可以实现垂直居中。它将元素的顶部、底部边距设置为自动，有效地将它居中在可用的空间中。

.image {
  margin: 0 auto;
}

使用 Flexbox

与水平居中类似，可以使用 Flexbox 的 align-items: center; 属性垂直居中元素。

.container {
  display: flex;
  align-items: center;
}

使用 transform: translate(-50%, -50%);

对于任何类型的元素，使用 transform: translate(-50%, -50%); 属性可以将其同时水平和垂直居中。它将元素向左和向上移动其自身尺寸的 50%，从而将其置于容器的中心。

.element {
  transform: translate(-50%, -50%);
}

结论

CSS 中的元素居中是一种有用的技术，它可以创建平衡且视觉上令人愉悦的布局。通过利用本文中概述的各种技术，你可以轻松地实现垂直和水平居中，为你的网页增添专业和吸引人的元素。