Центр абзаца с полями для создания пустых мест

Question

Поэтому я пытаюсь центрировать свой абзац по центру страницы, создавая левое и правое поле "пустые места".

Моя цель - поместить его в текст-блокируйте стиль и поместите его в центр страницы при создании пустых столбцов в левой и правой части страницы.Мне нравится то, что у меня есть в режиме рабочего стола, но оно "стационарно" и не отзывчиво.Когда вы изменяете размер своего браузера в адаптивном режиме, он не остается в центре.Вот пример того, чего я пытаюсь достичь, как показано в моем быстром наброске ниже и моих кодах.

ЦЕЛЬ: Кроме того, когда я изменяю размер своего браузера для мобильных устройств, я хочу этого " текстовое поле", чтобы начать заполнение поля, чтобы оно выглядело читаемым, когда вы находитесь на вашем телефоне или планшете. БОНУС: Я хочу изменить ширину или размер поля для любой стороны текстового поля, чтобы он выглядел хорошо и равномерно, наряду с другим содержимым, которое есть в моем полном HTML-документе.Это только часть моего HTML-документа.

ПРИМЕЧАНИЕ: Когда вы запускаете фрагмент кода, я предлагаю вам нажать на Полная страница чтобы вы могли понять, о чем я говорю, чтобы вам было легче следовать.

.mainSummary {
  text-align: center;
  margin-left: 600px;
  margin-right: 600px;
}

<link rel="stylesheet" type="text/css" href="style.css">

<div class="mainSummary">
  <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus.
  </p>
</div>

Answer 1

Попробуйте этот код:

.mainSummary {
    margin-left: 100%;
    margin-right: 100%;
}

Или

.mainSummary {
    margin-left: auto;
    margin-right: auto;
}

Answer 2

попробуйте это.Если у вас нет Bootstrap 4, то flex работать не будет.Так что без flex, вы можете попробовать это.

.mainSummary {
  display:block;
  margin: 0 auto;
  text-align:center;
}

Answer 3

Flex + автоматические поля могут помочь в достижении вашей цели.

Рабочий пример : https://codepen.io/cdtapay/pen/LqyaZx

.summary {
    display: flex;
}

.summary__content {
    padding: 1rem;
    background-color: lightblue; 
    border: 2px solid lightgreen; 
    border-radius: 10px; 
    text-align: center; 
    font-size: 22px;
    /* Set the desired max-width for mobile */
    max-width: 250px;
    margin: 0 auto;
 }

<div class="summary">
    <p class="summary__content">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
      praesentium voluptatum deleniti atque corrupti quos dolores et quas 
      molestias excepturi sint occaecati cupiditate non provident, similique 
      sunt in culpa qui officia deserunt mollitia.
    </p>
</div>