在所有屏幕上将大 div 居中但允许滚动？答案

【问题标题】：Center a Large Div on All Screens But Allow Scrolling?在所有屏幕上将大 div 居中但允许滚动？
【发布时间】：2021-04-06 01:02:31
【问题描述】：

我试图弄清楚如何使一个大 div 以所有屏幕为中心，但也可以滚动用于无法看到所有 div 的较小屏幕。

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

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

这可能吗？另外，有没有非javascript的解决方案？

【问题讨论】：

标签： css scroll margin center

【解决方案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>

【讨论】：