CSS 中如何实现水平和垂直居中一个元素？

答题要点

在 CSS 中，实现元素的水平和垂直居中可以通过多种方式。以下是几种常见的方法：一是使用 Flexbox 布局。将父元素的 `display` 属性设置为 `flex` 或 `inline-flex`，然后使用 `justify-content: center` 实现水平居中，使用 `align-items: center` 实现垂直居中。例如：`.parent { display: flex; justify-content: center; align-items: center; }`。二是使用绝对定位和负边距。将子元素绝对定位，然后通过 `top: 50%` 和 `left: 50%` 将元素的左上角移动到父元素的中心，再使用负边距将元素向上和向左移动自身宽度和高度的一半。例如：`.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }`。三是使用绝对定位和 `transform`。同样将子元素绝对定位，然后使用 `top: 50%` 和 `left: 50%`，再通过 `transform: translate(-50%, -50%)` 实现居中。这种方法不需要知道元素的具体宽度和高度。例如：`.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`。