【CSS】居中样式
- 对于行内元素，使用 text-align: center。
- 对于已知宽度的块级元素，使用 margin: 0 auto。
- 对于需要灵活布局的元素，使用 Flexbox 或 Grid。
flex
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中，可选 */
height: 100%; /* 如果需要垂直居中，则需要指定高度 */
}
grid
Plain Text
.parent {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 100%; /* 如果需要垂直居中，则需要指定高度 */
}
对于绝对定位的元素，使用 position: absolute 结合 transform: translate。
.absolute-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}