CSS 水平、垂直居中指南

CSS 水平居中方法

1. 使用 margin: 0 auto

这是最简单、最常用的水平居中方法之一。只需要在父元素上设置 margin: 0 auto; 即可。

.container {
  margin: 0 auto;
  width: 500px;
}

2. 使用 text-align: center

如果子元素是文本，可以使用 text-align: center; 来实现水平居中。

.text-container {
  text-align: center;
}

3. 使用 flexbox

flexbox 是一种强大的布局工具，可以轻松实现水平居中。只需要在父元素上设置 display: flex; 和 justify-content: center; 即可。

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

CSS 垂直居中方法

1. 使用 line-height

对于单行文本，可以使用 line-height 来实现垂直居中。只需要将父元素的 line-height 设置为与子元素的高度相同即可。

.line-height-container {
  line-height: 50px;
}

2. 使用 margin: auto

对于多行文本或块元素，可以使用 margin: auto; 来实现垂直居中。只需要在子元素上设置 margin: auto; 即可。

.margin-auto-container {
  margin: auto;
}

3. 使用 flexbox

flexbox 也可以用于垂直居中。只需要在父元素上设置 display: flex; 和 align-items: center; 即可。

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

4. 使用 absolute 定位

对于绝对定位的子元素，可以使用 top: 50%; 和 transform: translateY(-50%); 来实现垂直居中。

.absolute-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

结论

以上列出的 CSS 水平居中和垂直居中方法都非常实用。您可以根据不同的情况选择最适合自己的方法。希望本文能帮助您轻松实现 CSS 居中布局，打造美观的网页。