17370845950

使用Flexbox实现水平垂直居中只需设置父容器display: flex、align-items: center和justify-content: center，前者控制垂直居中，后者控制水平居中，适用于固定或不固定尺寸的子元素，并支持多子元素集体居中，需确保容器有足够高度（如height: 100vh）以呈现效果。

使用 Flexbox 实现水平垂直居中是一种现代、简洁且兼容性良好的方法。只需要在父容器上设置两个 CSS 属性即可完成。

使用 flex、align-items 和 justify-content

将父容器设置为 Flex 容器，然后通过 align-items 控制交叉轴（垂直）居中，justify-content 控制主轴（水平）居中。

示例代码：

.container {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 100vh;            /* 示例：让容器占满视口高度 */
}

这种方法适用于所有类型的子元素，无论其尺寸是否固定，都能完美居中。而且支持多个子元素的集体居中布局。

补充说明

• align-items: center 使子元素在交叉轴（默认为 Y 轴）上居中对齐。
• justify-content: center 使子元素在主轴（默认为 X 轴）上居中对齐。
• 如果容器没有明确高度，可能需要设置高度（如 height: 300px 或 min-height）才能看到垂直居中效果。

基本上就这些，不复杂但容易忽略细节。只要父元素是 flex 布局，这两个属性一加，内容就稳稳居中了。