【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%);
}