CSS如何实现.Div1居中对齐、.Div2固定在容器底部

云上老周

2026-8-27

布局实现方案

核心利用你已经给.Div1设置的position: relative作为定位基准，搭配Flex布局做居中，代码改动量最小，适配性最好。

样式调整步骤

首先给.Div1的所有外层祖先元素（包括html、body）加上height: 100%，清除默认margin，否则你写的height:100%不会生效
修改.Div1原有样式，删掉不生效的表格属性border-collapse、适配性差的固定行高line-height:90px和无效的vertical-align，加Flex属性实现自身内容居中
给.Div2加绝对定位，固定到.Div1的底部，清除内部标签默认边距避免错位

完整代码

最终CSS

/* 外层容器高度初始化，根据你实际的DOM结构调整选择器即可 */
html, body {
  height: 100%;
  margin: 0;
}

.Div1 {
  /* 保留原有有效样式 */
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 121, 1) 25%, rgba(0, 212, 255, 1) 100%);
  color: rgb(255, 255, 255);
  font-size: 30px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /* 新增居中属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 如果Div1不需要占满全宽，改成固定宽度后加margin: 0 auto即可水平居中 */
}

.Div2 {
  /* 定位到容器底部 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 调整padding值可以改底部元素和容器边缘的间距 */
  padding-bottom: 20px;
}

/* 清除p标签默认外边距，避免底部出现多余留白 */
.Div2 p {
  margin: 0;
}

对应HTML结构

<div class="Div1">
  I-BS
  <div class="Div2">
    <p>
      <strong>A&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;D</strong>
    </p>
  </div>
</div>