如何在 CSS 中居中 div

在 Web 开发中，让元素居中是一项基本的任务。在这篇文章中，我们将讨论如何在 CSS 中居中 div。

1. 使用 margin 属性

您可以使用 margin 属性将 div 元素设为居中。例如，以下代码将使 div 元素在其父元素内水平和垂直居中：

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

这段代码通过将 div 元素的左上角向上和向左移动其宽度和高度的一半来将其居中。

2. 使用 flexbox

Flexbox 是一种样式布局，可以很容易地将元素居中。例如，以下代码将使用 flexbox 属性来使 div 元素水平居中：

.container {
  display: flex;
  justify-content: center; /* 将 div 居中 */
}

3. 使用 grid

CSS 网格布局是一种相对较新的布局方式，也可以很容易地将元素居中。例如，以下代码将使用 grid 属性将 div 元素水平和垂直居中：

.container {
  display: grid;
  place-items: center; /* 将 div 居中 */
}

4. 使用 table 元素

您还可以使用 table 元素来使元素居中。例如，以下代码将使 div 元素在其父元素内水平和垂直居中：

.table {
  display: table;
  margin: 0 auto;
  height: 100%; /* 更改此值以使 div 元素垂直居中 */
}
td {
  vertical-align: middle;
}

以上就是在 CSS 中居中 div 的常用方法，您可以根据自己的需求选择其中的一种或几种。如有任何疑问或建议，欢迎在下方留言。