元素使用 align-items center 和 overflow auto 之后，部分内容显示不全

2025-05-11 | 0 浏览 | 0 评论

* 元素使用 align-items center 和 overflow auto 之后，部分内容显示不全_align-items: center;-CSDN博客 * [https://blog.csdn.net/weixin_42335036/article/details/125515255](https://blog.csdn.net/weixin_42335036/article/details/125515255) * 文章浏览阅读3.8k次，点赞23次，收藏14次。当使用`align-items: center`使内容居中后，小屏幕设备可能会导致部分内容被遮挡。为了解决这个问题，可以尝试两种方法：1. 嵌套一层盒子，设置内部盒子高度为100%，保持内容居中且能正确滚动；2. 将`display: flex`更改为`display: grid`，同样实现内容居中和垂直滚动。这两种方案都能有效避免内容显示不全的问题。 * 2025-01-03 09:02:27

元素使用 align-items center 和 overflow auto 之后，部分内容显示不全

当我们为了让内容居中使用了 align-items center 属性之后，因为屏幕小的会遮挡一部分内容

我们就会给盒子再加上 overflow-y auto 这个属性

但是当我们缩小屏幕时，会发现，内容的上半部分会显示不出来

<style>
  .box {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

参考文档：

align-items - CSS（层叠样式表） | MDN

这里提供两种解决方案：

1. 嵌套一层盒子

<style>
  .container {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
  .box {
    height: 100%;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="content"></div>
    </div>
  </div>
</body>

2. 将 display flex 改为 display grid

<style>
  .box {
    height: 100vh;
    display: grid;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

======================

思源