如何在 CSS 中居中元素

在 CSS 中，居中元素是一个常见的问题。它有很多种不同的解决方案，每种解决方案都有自己的优缺点。在本文中，我们将介绍一些常见的解决方案，让您能够选择最适合您的需求的方案。

水平居中

文字或行内元素

对于行内元素或文本内容，可以使用 text-align 属性将其水平居中。

.container {
  text-align: center;
}

块级元素

使用 margin

使用 margin 属性可以实现水平居中块级元素，需要设置左右的 margin 值为 auto。

.container {
  width: 50%;
  margin: 0 auto;
}

使用 flexbox

使用 Flexbox 布局，可以很容易地实现水平居中。

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

使用 grid

使用 Grid 布局，也可以很容易地实现水平居中。

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

垂直居中

单行文字

对于单行文字，可以使用 line-height 属性实现垂直居中。

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

多行文字

对于多行文字，需要使用 Flexbox 或 Grid 布局实现垂直居中。

使用 Flexbox

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

使用 grid

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

使用 CSS 表格布局

使用 CSS 表格布局也可以实现垂直居中，但是需要创建两个容器。

<div class="parent">
  <div class="child">Centered content</div>
</div>

.parent {
  display: table;
  height: 200px;
  width: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

居中元素

有些情况下，需要同时实现水平和垂直居中。

使用 Flexbox

使用 Flexbox 布局，可以很容易地实现居中。

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

使用绝对定位

使用绝对定位也可以很容易地实现居中。

<div class="parent">
  <div class="child">Centered content</div>
</div>

.parent {
  position: relative;
  height: 200px;
  width: 100%;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

总结

在 CSS 中，居中元素有很多种不同的解决方案。本文介绍了一些常见的解决方案，包括使用 margin、Flexbox、Grid、CSS 表格布局和绝对定位等。您可以根据自己的需求选择最适合您的方案。