实现顶部元素不超出屏幕的垂直居中布局

本文探讨如何使用纯CSS实现一个垂直居中内容区域，并在其上方放置一个图片元素，同时保证图片在容器高度不足时，始终停留在屏幕顶部，避免被裁剪或隐藏。我们将利用CSS Grid布局来实现这一需求，避免使用JavaScript进行额外的尺寸检测。

在Web开发中，经常会遇到需要将内容垂直居中，并在内容上方放置一些元素的需求。一个常见的挑战是，当容器高度不足时，如何保证这些顶部元素不超出屏幕，保持可见性。本文将介绍一种使用CSS Grid布局实现的方案，无需依赖JavaScript，即可优雅地解决这个问题。

使用CSS Grid布局

CSS Grid布局是一种强大的二维布局系统，它允许我们更灵活地控制页面元素的排列和对齐。在本例中，我们将使用Grid布局来实现垂直居中和顶部元素的定位。

HTML 结构

首先，我们需要调整HTML结构，将图片元素移到 .centered 容器之外，作为 .wrapper 的直接子元素。

<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

查看详情

接下来，我们定义CSS样式，使用Grid布局来控制 .wrapper 的子元素。

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

代码解释

• display: grid;：将 .wrapper 设置为Grid容器。
• grid-template-rows: 1fr auto 1fr;：定义了三行，第一行和第三行占据剩余空间的1/2，第二行的高度由其内容决定（auto）。这实现了垂直居中的效果。
• justify-content: center;：使内容在水平方向上居中。
• align-items: end;：将内容区域（.centered）对齐到Grid容器的底部。
• .on-top：图片元素的样式，margin-bottom 用于调整图片与内容区域的间距。

JavaScript (可选)

以下 JavaScript 代码用于动态调整 .wrapper 的高度，以便演示当容器高度变化时，图片元素的行为。

let i = 0;

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

总结

通过使用CSS Grid布局，我们可以轻松地实现垂直居中，并在顶部放置元素，同时保证这些元素在容器高度不足时，始终停留在屏幕顶部，避免被裁剪或隐藏。这种方法简洁高效，无需依赖JavaScript，提高了代码的可维护性和性能。在实际项目中，可以根据具体需求调整Grid布局的参数，以实现更复杂的布局效果。

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