Почему margin-top: auto не работает внутри вложенного div?

Допустим, есть элемент div с минимальной высотой 500 пикселей и вложенный элемент div с минимальной высотой 200 пикселей. Если я поставлю верхнее поле для вложенного div равным 150px, оно будет центрировано по вертикали. Итак, свойство margin работает. Но если я задаю то же самое, что и margin-top или margin как auto, вложенный div центрируется не по вертикали, а как margin: auto; центры по горизонтали. Почему?

.container {
  min-height: 500px;
  border: 0.3em solid black;
}

.nested-div {
  min-height: 200px;
  width: 200px;
  border: 0.3em solid red;
  margin: auto;
}

<html>
  <head>
    <link rel = "stylesheet" type = "text/css" href = "styles.css" />
  </head>
  <body>
    <div class = "container">
      <div class = "nested-div">
      </div>
    </div>
  </body>
</html>

html css

20.03.2022 08:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это не работает, потому что margin-top:auto и margin-bottom:autoзначения будут вычисляться как нуль.

Вы пытались использовать flex для центрирования div?

.container {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.3em solid black;
}

.nested-div {
  min-height: 200px;
  width: 200px;
  border: 0.3em solid red;
}

<html>
  <head>
    <link rel = "stylesheet" type = "text/css" href = "styles.css" />
  </head>
  <body>
    <div class = "container">
      <div class = "nested-div">
      </div>
    </div>
  </body>
</html>

20.03.2022 08:14

Другие вопросы по теме

Как поместить цвет фона за форму?

Центрировать div по вертикали в Bootstrap 5

Изменить ширину события в FullCalendar (React JS)

Как сохранить изображение из html2canvas

Почему радиус границы работает только в 1 углу?

Маскирование видео с помощью маски пути SVG

Остановите одну анимацию, но продолжайте чередовать другую анимацию в CSS

Проблема При анимации точки svg с помощью tranform translate X

Как стилизовать повторяющийся текст?

Как поставить все изображения в ряд?

Почему margin-top: auto не работает внутри вложенного div?

Ответы 1

Другие вопросы по теме

Похожие вопросы