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

答题要点

在 CSS 中实现元素的水平和垂直居中可以有多种方法。对于行内元素，若要实现水平和垂直居中，可以通过设置其父元素的 `text-align: center` 和 `line-height` 等于父元素的高度来实现。例如，父元素高度为 200px，设置 `line-height: 200px` 且 `text-align: center`，内部的行内元素就能水平和垂直居中。对于块级元素，一种常见的方法是使用 Flexbox 布局。给父元素设置 `display: flex` 或 `display: 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; }`，前提是子元素的宽度和高度已知。