如何实现两个Div水平居中上下排列并适配全分辨率？

嘿，我懂你现在的困扰——靠像素硬调布局只能在1920*1080下正常，换个分辨率就乱套，试百分比还直接跑到左上角。其实不用纠结像素还是百分比，用现代CSS布局方案就能轻松实现完全适配的效果，下面给你几个靠谱的方法：

方法一：Flexbox（最推荐，灵活易维护） #

Flexbox是现在布局的首选，代码简洁，适配性拉满。核心是给父容器设置Flex属性，让子元素自动排列并居中：

<!-- HTML结构 -->
<div class="container">
  <div class="box box1">第一个div</div>
  <div class="box box2">第二个div</div>
</div>

/* CSS样式 */
.container {
  /* 把容器变成Flex容器 */
  display: flex;
  /* 设置子元素垂直排列（上下） */
  flex-direction: column;
  /* 让子元素在水平方向上居中 */
  align-items: center;
  /* 控制子元素垂直方向的分布，用center是整体垂直居中，也可以用space-between/space-around调整间距 */
  justify-content: center;
  /* 让容器占满整个视口高度，确保任何屏幕下都能撑满 */
  min-height: 100vh;
  /* 可选：加内边距避免div贴边 */
  padding: 20px;
  box-sizing: border-box;
}

.box {
  /* 子div宽度可以用固定值、百分比或max-width，这里用50%适配不同屏幕 */
  width: 50%;
  /* 可选：加高度和背景色方便查看效果 */
  height: 150px;
  background-color: #f0f0f0;
  margin-bottom: 20px; /* 控制两个div的上下间距 */
}

.box:last-child {
  margin-bottom: 0; /* 最后一个div去掉底部间距 */
}

这个方案能适配的原因：min-height:100vh让父容器始终占满屏幕高度，Flex的align-items:center确保子元素水平居中，flex-direction:column让它们自动上下排列，不管屏幕尺寸怎么变，布局都会自动调整。

方法二：Grid布局（更简洁的居中方案） #

Grid也是现代布局神器，实现居中更直接，代码更少：

<div class="container">
  <div class="box box1">第一个div</div>
  <div class="box box2">第二个div</div>
</div>

.container {
  display: grid;
  /* 定义两行，子元素自动上下排列 */
  grid-template-rows: auto auto;
  /* 同时让子元素水平和垂直居中 */
  place-items: center;
  gap: 20px; /* 专门控制两个div的上下间距，比margin更干净 */
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.box {
  width: 50%;
  height: 150px;
  background-color: #f0f0f0;
}

place-items:center是align-items:center和justify-items:center的简写，直接让子元素在单元格里水平垂直居中，gap属性统一控制间距，不用单独处理最后一个元素的margin。

方法三：基础margin:auto方案（兼容老浏览器） #

如果需要兼容IE这类老浏览器，可以用这个基础方法：

<div class="container">
  <div class="box box1">第一个div</div>
  <div class="box box2">第二个div</div>
</div>

.container {
  position: relative;
  min-height: 100vh;
  /* 用padding让子元素不会贴到容器顶部/底部 */
  padding: 40px 0;
  box-sizing: border-box;
}

.box {
  /* 水平居中的核心：左右margin设为auto */
  margin: 0 auto 20px;
  width: 50%;
  height: 150px;
  background-color: #f0f0f0;
}

.box:last-child {
  margin-bottom: 0;
}

这个方案靠margin:0 auto实现水平居中，父容器用min-height:100vh撑满屏幕，通过padding和margin控制上下间距，同样能适配各种分辨率。

为什么你之前用百分比会跑到左上角？ #

大概率是父容器没有设置明确的高度或宽度，子元素的百分比是相对于父元素尺寸计算的，如果父元素没有定义高度/宽度，子元素的百分比就会失效，导致元素缩成最小尺寸并跑到左上角。上面的方案都给父容器设置了min-height:100vh，确保父容器有足够空间，子元素的百分比就能正常生效了。

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