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