在所有屏幕上居中一个大 Div 但允许滚动？

Question

我正在尝试弄清楚如何使大 div 在所有屏幕上居中，但对于较小的屏幕也可以滚动，否则无法看到所有 div。

例如，假设 div 的大小为 1200px x 600px。使用以下内容将使 div 居中，但不允许在较小的屏幕尺寸上滚动： position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;

我的目标是找到一种方法，让这些较小的计算机屏幕可以看到整个 div 大屏幕（通过滚动），但仍然让 div 在各种尺寸的屏幕上居中.

这可能吗？另外，有没有非javascript的解法呢？

Answer 1

希望能解决您的问题

.main-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          height: auto;
          padding: 20px;
          background: red;
      }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="main-wrapper">
    <div class="internal-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est, quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci, exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cupiditate ipsam et, nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto, vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem recusandae, repellat velit rerum. Repellendus harum, sequi architecto deleniti tenetur cumque, ducimus itaque, nam officia vero minima quos, debitis quis sunt. Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Architecto, quaerat, illum. Aperiam, repellendus sit atque architecto cupiditate. Quis consequuntur, iure nihil doloremque, aut distinctio quibusdam rem, mollitia incidunt, voluptate quasi?
    </div>
    </div>
  </body>
</html>

在所有屏幕上居中一个大 Div 但允许滚动？

Center a Large Div on All Screens But Allow Scrolling?

css

scroll

center

margin