0

Есть верстка с хедером и мейном. Высота мейна заранее неизвестна, и вычисляется браузером на лету. Внутри мейна есть див. У дива заданы четкие размеры. Требуется выровнять див по вертикали, чтобы он был по середине мейна. Как это сделать?

* {
  box-sizing: border-box;
  margin: 0;
}

header {
  height: 88px;
  width: 100%;
  background-color: rgb(138, 138, 151);
}

main {
  position: relative;
  display: flex;
  justify-content: center;
}

.content {
  width: 1000px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: rgb(221, 193, 67);
}
<div class="container">
  <header></header>
  <main>
    <div class="content">контент для выравнивания</div>
  </main>
</div>

Что я вижу в браузере

Результат, который я хочу получить:

введите сюда описание изображения

2
  • див классом контент выровнить надо?
    – DeniDove
    2 мар 2022 в 11:49
  • @DeniDove да, относительно main 2 мар 2022 в 11:52

2 ответа 2

0

введите сюда описание изображения А так пробовали?

Добавьте эти свойства, А так пробовали? если правильно понял то так можно!!! введите сюда описание изображения

2
  • я вставил в вопрос скриншот результата, который я хочу получить. Еще раз перечитайте вопрос, и посмотрите скриншот с результатом. 2 мар 2022 в 11:59
  • @ОлегВерушкин моежт так? там еще марджин отрицательный сделаете если наполовину от размера блока, то прям ровно станет. марджин-топ: -половина его размера
    – DeniDove
    2 мар 2022 в 12:05
0

* {
  box-sizing: border-box;
  margin: 0;
}

header {
  height: 88px;
  width: 100%;
  background-color: rgb(138, 138, 151);
}

main {
  display: flex;
  justify-content: center;
}

.content {
  width: 1000px;
  height: 200px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: rgb(221, 193, 67);
}
<body>
  <div class="container">
    <header></header>
    <main>
      <div class="content">контент для выравнивания</div>
    </main>
  </div>
</body>

введите сюда описание изображения

4
  • это совсем не то, что я хочу сделать. Пожалуйста, внимательнее читайте вопрос. 2 мар 2022 в 11:24
  • Изменил, теперь всё как вы хотите
    – Miha
    2 мар 2022 в 11:58
  • Так див выравнивается внутри body. А нужно выравнивать внутри main. 2 мар 2022 в 12:01
  • Ещё раз изменил, надеюсь так
    – Miha
    2 мар 2022 в 12:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.