CSS如何实现垂直居中布局_掌握Flexbox与Grid核心用法-css教程-PHP中文网

flexbox垂直居中需父容器设display: flex和明确高度（如min-height: 100vh），align-items: center才生效；grid用place-items: center最简；absolute居中须配合position: relative、top/left: 50%及transform；移动端优先用100dvh防滚动条。

css如何实现垂直居中布局_掌握flexbox与grid核心用法

Flexbox垂直居中为什么加`align-items: center`还不生效？

因为父容器默认是row方向，align-items控制的是交叉轴对齐——只有当父元素设了display: flex且高度有约束（比如height或min-height），它才起作用。常见错误是父容器没设高度，或者忘了加justify-content: center来同时水平居中。

父容器必须有明确高度（height: 100vh、min-height: 100vh等）
子元素不能有margin: auto干扰（Flex下它不参与居中逻辑）
如果子元素是块级且宽高不定，align-items: center + justify-content: center就足够
避免在子元素上设vertical-align（它对Flex子项无效）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Grid实现单个子元素垂直居中要不要写`place-items`？

要，而且最简方案就是place-items: center。它等价于justify-items: center + align-items: center，但只对网格容器内的直接子项生效。注意：它和place-content不同，后者还管行/列间距。

父容器必须是display: grid
不需要定义grid-template-rows或grid-template-columns也能用
如果子元素本身设置了align-self或justify-self，会覆盖place-items
在IE中完全不支持，place-items是CSS Grid Level 2特性

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

老项目里用`position: absolute`居中，`transform: translate(-50%, -50%)`为什么偏移不准？

因为transform基于元素自身宽高计算，如果子元素是图片、文字或未设置width/height的块，浏览器可能在渲染完成前无法准确读取尺寸，导致回流后位置跳动。更隐蔽的问题是父容器没设position: relative，导致top/left相对于视口定位。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父容器必须有position: relative（或absolute/fixed）
子元素需明确设top: 50% + left: 50%
transform: translate(-50%, -50%)必须和top/left配合使用，缺一不可
对于图片，建议加上max-width: 100%防止溢出影响计算

.container {
  position: relative;
  min-height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}