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

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

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

使用 CSS Grid 实现布局

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

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

立即学习“前端免费学习笔记（深入）”；

HTML 结构：

<div class="wrapper">
  <img class="on-top" src="https://via.placeholder.com/300x100">
  <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 样式：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

.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;
}

JavaScript (用于演示容器高度变化):

let i = 0;

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

代码解释：

1. .wrapper:
   • display: grid;：将容器设置为 Grid 布局。
   • grid-template-rows: 1fr auto 1fr;：将容器分为三行，第一行和第三行占据剩余空间（1fr），中间行（auto）的高度由内容决定。这使得内容区域始终垂直居中。
   • justify-content: center;：使内容在水平方向上居中。
   • align-items: end;：将内容区域对齐到容器底部。
2. .centered: 定义了内容区域的样式，例如背景颜色和宽度。
3. .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 布局可以轻松实现元素置于垂直居中容器顶部且不超出屏幕的布局，无需编写复杂的 JavaScript 代码。这种方法不仅简洁高效，而且具有良好的可维护性和扩展性，是现代 Web 开发中常用的布局技巧之一。通过掌握 CSS Grid 布局，开发者可以更加灵活地控制页面元素的排列，创造出更加美观和用户友好的界面。

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