如何使用CSS Flexbox实现div元素的垂直与水平居中？

以下是几种适配响应式布局的精准居中方案，解决不同屏幕尺寸下的兼容性问题：

Flexbox 方案（推荐） #

Flexbox是目前最简洁且响应式友好的居中方式，无需固定尺寸，自动适配各种屏幕：

body {
  margin: 0;
  min-height: 100vh; /* 确保body占满视口高度 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.center-div {
  /* 可自定义div样式，无需固定宽高 */
  padding: 2rem;
  background: #f0f0f0;
}

• 优点：无需知晓div具体尺寸，视口变化时自动保持居中，兼容性覆盖绝大多数现代浏览器。

Grid 方案 #

Grid布局同样能快速实现全局居中，代码更简洁：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center; /* 同时实现垂直+水平居中 */
}

.center-div {
  padding: 2rem;
  background: #f0f0f0;
}

• 优点：一行代码搞定双方向居中，适配任意屏幕尺寸，适合现代项目。

CSS Transform 方案（兼容旧浏览器） #

如果需要兼容较老的浏览器（如IE9+），可以用绝对定位+transform的组合，避免固定尺寸限制：

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
}

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸偏移，无需固定宽高 */
  padding: 2rem;
  background: #f0f0f0;
}

• 优点：兼容旧浏览器，div尺寸变化时仍能保持居中，不会因屏幕缩放错位。

你之前用margin或普通position失效的核心原因，大多是没让父容器（body）占满整个视口高度，或是依赖了div的固定宽高。上面的方案都确保了父容器占满视口，且不绑定div的固定尺寸，完美适配响应式布局。

内容的提问来源于stack exchange，提问作者Olivia Jacqueline