如何在 CSS 中水平和垂直居中内容

在 Web 开发中，经常需要将元素水平和垂直居中。本篇文章将介绍几种实现方法。

方法一：使用 flexbox

CSS3 引入了 flexbox 布局，可以很方便地实现元素的水平和垂直居中。

HTML 代码：

<div class="container">
  <div class="content">要居中的内容</div>
</div>

CSS 代码：

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

.content {
  /* 其他样式 */
}

解释：

• display: flex：将容器设为 flex 布局；
• justify-content: center：水平居中；
• align-items: center：垂直居中。

具体可以参考 flexbox 的相关文档。

方法二：使用绝对定位

如果你知道要居中的元素的宽度和高度，可以使用绝对定位来实现水平和垂直居中。

HTML 代码：

<div class="container">
  <div class="content">要居中的内容</div>
</div>

CSS 代码：

.container {
  position: relative;
  height: 100vh;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式 */
}

解释：

• position: relative：设置容器为相对定位，使 content 元素可以相对于该容器定位；
• position: absolute：设置 content 元素为绝对定位，参考点为容器，坐标原点为容器的左上角；
• left: 50% 和 top: 50%：将 content 元素的左上角移动到容器的中心；
• transform: translate(-50%, -50%)：将 content 元素的中心点向左和向上移动自身宽度和高度的一半，以实现居中。

方法三：使用表格布局

可以使用表格布局来实现元素的居中。

HTML 代码：

<div class="container">
  <div class="content">要居中的内容</div>
</div>

CSS 代码：

.container {
  display: table;
  width: 100%;
  height: 100vh;
}

.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /* 其他样式 */
}

解释：

• display: table：将容器设为表格布局；
• width: 100% 和 height: 100vh：使容器占据整个浏览器窗口；
• display: table-cell：将 content 元素设为表格单元格；
• text-align: center 和 vertical-align: middle：水平和垂直居中。

方法四：使用 grid 布局

CSS3 引入了 grid 布局，可以很方便地实现元素的水平和垂直居中。

HTML 代码：

<div class="container">
  <div class="content">要居中的内容</div>
</div>

CSS 代码：

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.content {
  /* 其他样式 */
}

解释：

• display: grid：将容器设为 grid 布局；
• place-items: center：水平和垂直居中；
• height: 100vh：使容器占据整个浏览器窗口。

以上是常用的几种方法，根据不同的需求可以选择适合的方法实现元素的居中。

注意事项：以上代码片段中用到的 class 名称与具体情况有关，可以根据实际需要修改。