使用 CSS Grid 实现元素置于垂直居中容器顶部且不超出屏幕的布局

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 CSS Grid 实现元素置于垂直居中容器顶部且不超出屏幕的布局

2025-10-29

浏览次数：次

返回列表

使用 css grid 实现元素置于垂直居中容器顶部且不超出屏幕的布局

本文介绍如何利用 CSS Grid 布局，实现一个元素位于垂直居中容器的顶部，并且在容器高度不足时，该元素能够固定在顶部，避免超出屏幕范围。通过示例代码和详细解释，帮助开发者掌握这种灵活且高效的布局技巧。

在网页设计中，经常会遇到需要将一个元素置于垂直居中的容器顶部，并且要保证在容器高度变化时，该元素不会超出屏幕范围的需求。传统的定位方式可能需要借助 J*aScript 来动态调整，但使用 CSS Grid 布局可以更简洁地实现这一效果。

使用 CSS Grid 实现布局

CSS Grid 布局提供了一种强大的方式来控制页面元素的排列。我们可以利用 Grid 的 grid-template-rows、justify-content 和 align-items 属性来实现垂直居中和元素置顶的效果。

以下是一个具体的实现示例：

HTML 结构：

<div class="wrapper">
  @@##@@
  <div class="centered">
    <h1>Heading</h1>
    <p>
      And some content. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book.
    </p>
  </div>
</div>
<button onclick="toggle()">toggle wrapper size</button>

CSS 样式：

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

.wrapper {
  height: 600px; /* 初始高度，可以根据需要调整 */
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* 将容器分为三行 */
  justify-content: center; /* 水平居中 */
  align-items: end; /* 底部对齐，保证内容区域在底部 */
}

.centered {
  background: #F00; /* 仅用于演示，可以替换为实际样式 */
  width: 300px; /* 内容区域宽度 */
}

.on-top {
  margin-bottom: 16px; /* 元素与内容区域的间距 */
}

button {
  position: absolute;
  top: 0;
  right: 0;
}

J*aScript (用于演示容器高度变化):

let i = 0;

function toggle() {
  document.querySelector('.wrapper').style.height = i++ % 2 === 0 ? '300px' : '600px';
}

代码解释：

.wrapper:
- display: grid;：将容器设置为 Grid 布局。
- grid-template-rows: 1fr auto 1fr;：将容器分为三行，第一行和第三行占据剩余空间（1fr），中间行（auto）的高度由内容决定。这使得内容区域始终垂直居中。
- justify-content: center;：使内容在水平方向上居中。
- align-items: end;：将内容区域对齐到容器底部。
.centered: 定义了内容区域的样式，例如背景颜色和宽度。
.on-top: 定义了置于顶部的元素的样式，例如底部外边距。

工作原理：

通过将容器设置为 Grid 布局，并使用 grid-template-rows 将其划分为三行，我们可以利用 align-items: end 属性将内容区域对齐到容器底部。同时，1fr 单位使得顶部和底部行自动分配剩余空间，保证了垂直居中的效果。当容器高度减小时，置于顶部的元素会自动向上移动，直到触及容器顶部，从而避免超出屏幕范围。

注意事项

确保 .wrapper 容器具有明确的高度，以便 Grid 布局能够正常工作。
可以根据实际需求调整 grid-template-rows 的值，以实现不同的布局效果。
如果需要更复杂的布局，可以考虑使用 CSS Grid 的其他属性，例如 grid-template-columns、grid-column 和 grid-row。

总结

使用 CSS Grid 布局可以轻松实现元素置于垂直居中容器顶部且不超出屏幕的布局，无需编写复杂的 J*aScript 代码。这种方法不仅简洁高效，而且具有良好的可维护性和扩展性，是现代 Web 开发中常用的布局技巧之一。通过掌握 CSS Grid 布局，开发者可以更加灵活地控制页面元素的排列，创造出更加美观和用户友好的界面。

以上就是使用 CSS Grid 实现元素置于垂直居中容器顶部且不超出屏幕的布局的详细内容，更多请关注其它相关文章！

# 显示效果 # 美妆网站建设策划方案 # 营销事件平台推广方案 # 龙华网络推广营销策划 # 恩施网站建设机构 # 仙桃网站建设推广 # 网站建设评审会简报 # 深圳优质营销推广 # 网站装修搜索推广 # 台北百度网站优化 # 西藏网站建设电话 # 将其 # 这一 # 是一个 # css # 可以利用 # 设置为 # 可以根据 # 单选框 # 表单 # red # 垂直居中 # 排列 # 网页设计 # app # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Next.js中异步表单提交的加载指示：loading.tsx不生效及解决方案

下一篇：CSS样式优先级解析：父类能否直接覆盖子类样式？

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 CSS Grid 实现元素置于垂直居中容器顶部且不超出屏幕的布局

使用 CSS Grid 实现布局

注意事项

总结