简述怎么让一个 div 水平垂直居中 ？

让一个 div 元素在其父元素中水平垂直居中，有多种方法可以实现。以下是其中的一些方法：

1. 使用 Flexbox

Flexbox 是一个非常强大的 CSS 工具，可以轻松实现元素的水平和垂直居中。只需将父元素设置为 flex 容器，并使用 justify-content 和 align-items 属性即可。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 如果需要垂直居中到视口，可以使用这个属性 */
}

2. 使用 CSS Grid

CSS Grid 也是一个非常强大的布局系统，也可以很容易地实现元素的水平和垂直居中。

.parent {
  display: grid;
  place-items: center;
  height: 100vh; /* 如果需要垂直居中到视口，可以使用这个属性 */
}

3. 使用定位和转换

这种方法稍微复杂一些，但可以在更广泛的浏览器环境中工作。首先，你需要将父元素的 position 属性设置为 relative，然后将 div 的 position 属性设置为 absolute，并使用 transform 属性进行居中。

.parent {
  position: relative;
}

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

4. 使用表格布局

虽然这种方法现在已经不太常用，但在一些旧的浏览器环境中可能仍然有效。你可以将父元素设置为表格，然后使用 vertical-align 属性进行垂直居中。

.parent {
  display: table;
  width: 100%;
}

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

以上就是几种常见的让 div 水平垂直居中的方法。你可以根据你的具体需求和浏览器支持情况选择最适合你的方法。