如何使用CSS3实现bg与lb两个类的居中对齐？

我给你推荐几种常用且简洁的CSS3方案，轻松搞定两个div的居中对齐需求：

方法1：Flexbox弹性布局（最推荐） #

Flexbox是CSS3专门为解决对齐、排列问题设计的布局模块，代码简洁易维护，适配性也强。

先假设你的基础HTML结构如下：

<div class="parent-box">
  <div class="bg">背景区块</div>
  <div class="lb">内容区块</div>
</div>

对应的CSS代码：

.parent-box {
  /* 开启弹性布局 */
  display: flex;
  /* 子元素水平方向居中 */
  justify-content: center;
  /* 子元素垂直方向居中 */
  align-items: center;
  /* 让两个div垂直堆叠（改成row就是横向排列） */
  flex-direction: column;
  /* 给父容器设置宽高，比如占满整个浏览器视口 */
  width: 100vw;
  height: 100vh;
  /* 清除默认边距，避免留白 */
  margin: 0;
  padding: 0;
}

/* 给两个区块加基础样式方便区分 */
.bg, .lb {
  width: 220px;
  padding: 25px;
  margin: 10px 0;
  border: 1px solid #ddd;
}

核心属性解释： #

• display: flex：把父容器转换成弹性容器，子元素自动变成弹性项
• justify-content: center：控制弹性项在主轴（默认是水平方向）上的居中
• align-items: center：控制弹性项在交叉轴（默认是垂直方向）上的居中
• flex-direction: column：调整主轴方向为垂直，让两个div上下排列

方法2：Grid网格布局（CSS3进阶方案） #

Grid是更强大的二维布局系统，适合复杂布局场景，实现居中同样很高效。

使用相同的HTML结构，CSS代码如下：

.parent-box {
  /* 开启网格布局 */
  display: grid;
  /* 一行代码搞定水平+垂直居中 */
  place-items: center;
  /* 设置父容器宽高 */
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  /* 定义两行自适应高度，让两个div垂直排列 */
  grid-template-rows: auto auto;
  /* 两个区块之间的间距 */
  gap: 12px;
}

.bg, .lb {
  width: 220px;
  padding: 25px;
  border: 1px solid #ddd;
}

核心属性解释： #

• display: grid：将父容器转为网格容器
• place-items: center：这是align-items: center和justify-items: center的简写，一次性实现双方向居中
• gap：直接控制网格项之间的间距，比用margin更整洁

特殊场景方案：背景块+悬浮内容块 #

如果你的.bg是全屏背景层，.lb是悬浮在它上方的内容块，可以用绝对定位+transform的CSS3方案：

HTML结构：

<div class="bg">背景区块</div>
<div class="lb">内容区块</div>

CSS代码：

.bg {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  /* 作为子元素绝对定位的参考容器 */
  position: relative;
}

.lb {
  width: 220px;
  padding: 25px;
  border: 1px solid #ddd;
  /* 开启绝对定位 */
  position: absolute;
  /* 先定位到父容器的中心位置 */
  top: 50%;
  left: 50%;
  /* 通过平移自身实现完美居中 */
  transform: translate(-50%, -50%);
}

这种方案适合背景铺满容器，内容块悬浮居中的场景，兼容性也很好。

内容的提问来源于stack exchange，提问作者João