После того, как элемент использует align-items center и overflow auto, некоторый контент отображается не полностью

Когда мы используем атрибут align-items center для центрирования контента, поскольку экран маленький, он будет блокировать часть контента.

Мы добавим в поле свойство auto overflow-y.

Но когда мы уменьшим размер экрана, мы обнаружим, что верхняя часть контента не будет отображаться.

<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. Измените гибкий дисплей на отображаемую сетку

<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>

======================== Пишите тут всякую ерунду, не читайте

Потому что csdn делает вид, что хорошо знает качество статей

Если напишете меньше, то это некачественная статья, она вас не поднимет, она очень смешная.

Недавно добавленная функция определения качества csdn, действительно 6, "yyds"

Я считаю, что при столкновении с этой проблемой мой ответ может решить проблему на 100% Вы говорите, что моя статья не качественная?

Вы хотите, чтобы я написал в статье много глупостей?