时间戳

首页 > 解决方案 > 当内容较大时，垂直居中 div 而不会溢出

css - 当内容较大时，垂直居中 div 而不会溢出

问题描述

当没有很多内容时，它会居中，但是当我有更多内容时，它会裁剪并且模态的开头不可见。

如果我不使用绝对位置一切都可以，但是如果我的内容较少，它就不会居中

在此处输入图像描述

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 1000;
  overflow: auto;
  background: purple;
}

.modal {
  max-width: 528px;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(193, 192, 196, 0.35);
  background-color: #ffffff;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<body>
  <div class="overlay">
    <div class="modal">
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
      i want to be vertically centered, but when i have lot of content i dont want to get cropped on top
    </div>
  </div>
</body>

标签： csssass

解决方案

推荐阅读