使用Flexbox实现Header与Footer间图片的响应式居中问题

嘿，刚上手做第一个网站就碰到居中难题太正常了！Flexbox确实是解决这类问题的绝佳工具，大概率是你没把Flex的属性用在正确的层级上，或者没给容器足够的高度支撑垂直居中。我给你一套稳行的方案，照着改就行：

第一步：先确认你的HTML结构（参考这个基础结构） #

<body>
  <header>我的网站头部</header>
  <main class="center-image-wrapper">
    <img src="你的图片路径.jpg" alt="图片描述">
  </main>
  <footer>我的网站底部</footer>
</body>

第二步：核心CSS代码（关键注释都标好了） #

/* 先重置浏览器默认的边距和内边距，避免干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让整个body成为Flex容器，垂直排列子元素 */
body {
  display: flex;
  flex-direction: column;
  /* 必须设置这个，让body占满整个浏览器视口高度，否则垂直居中没空间 */
  min-height: 100vh;
}

/* 让Header和Footer保持自身高度，不被中间区域挤压 */
header, footer {
  flex-shrink: 0;
  padding: 1.5rem;
  background-color: #f5f5f5;
}

/* 中间的图片容器是关键：填充Header和Footer之外的所有剩余空间 */
.center-image-wrapper {
  /* flex:1 是 flex-grow:1 的简写，意思是占据父容器的剩余空间 */
  flex: 1;
  /* 给这个容器设置Flex，用来居中内部的图片 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  /* 可选：加个背景色，方便你看到这个区域的范围 */
  background-color: #e8e8e8;
}

/* 可选：限制图片最大尺寸，避免在大屏幕上撑破容器 */
.center-image-wrapper img {
  max-width: 90%;
  max-height: 90%;
}

为什么你之前可能没成功？ #

大概率是这两个点没做到：

• 没给外层容器（比如body）设置min-height:100vh，导致垂直居中没有足够的高度空间；
• 没给图片的父容器设置flex:1，让它填满Header和Footer之间的空隙，光给图片加Flex属性没用，得让父容器先撑起来。

如果你的结构是用一个自定义的wrapper（比如<div class="page-wrapper">）包裹Header、中间区域和Footer，那把display:flex; flex-direction:column; min-height:100vh这三个属性移到wrapper上就行，原理完全一样。

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