Блог

Главная - Вопросы по программированию - Центрировать большой Div на всех экранах, но разрешить прокрутку?

Центрировать большой Div на всех экранах, но разрешить прокрутку?

#css #scroll #margin #center

#css #прокрутка #маржа #центр

Вопрос:

Я пытаюсь выяснить, как сделать большой div центрированным на всех экранах, но также прокручиваемым для экранов меньшего размера, которые в противном случае не могли бы видеть весь div.

Например, предположим, что div имеет размер 1200px x 600px. Использование следующего будет центрировать div, но не разрешать прокрутку на меньших размерах экрана: position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;

Моя цель — найти способ, позволяющий этим меньшим компьютерным экранам видеть весь большой div (с помощью прокрутки), но при этом центрировать div на экранах всех размеров.

Возможно ли это? Кроме того, существует ли решение, отличное от javascript?

Ответ №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>