要在未知高度和宽度的元素中实现水平和垂直居中，可以使用多种 CSS 技巧。以下是几种常见的方案以及它们的简单手写实现：
1. Flexbox
HTML：
<div class="container">
<div class="centered-element">Centered</div>
</div>
CSS：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器填满视口 */
}
.centered-element {
/* 元素的样式 */
}
2. Grid
HTML：
<div class="container">
<div class="centered-element">Centered</div>
</div>
CSS：
.container {
display: grid;
place-items: center; /* 同时水平和垂直居中 */
height: 100vh; /* 使容器填满视口 */
}
.centered-element {
/* 元素的样式 */
}
3. Absolute + Transform
HTML：
<div class="container">
<div class="centered-element">Centered</div>
</div>
CSS：
.container {
position: relative;
height: 100vh; /* 使容器填满视口 */
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使元素居中 */
}
4. Line-Height (适用于单行文本)
HTML：
<div class="container">
<div class="centered-element">Centered</div>
</div>
CSS：
.container {
height: 100vh; /* 使容器填满视口 */
line-height: 100vh; /* 设置行高为容器高度 */
text-align: center; /* 水平居中 */
}
.centered-element {
display: inline-block;
vertical-align: middle; /* 垂直居中 */
line-height: normal; /* 恢复正常行高 */
}
