Почему блок не центирируется в дочернем блоке grid?

Рейтинг: 0Ответов: 2Опубликовано: 29.04.2023

Хочу в блоке с классом "a" разместить компоненты и чтобы поверх их в этом же блоке открывалось модальное окно в родительском блоке display: fixed;

Вот код:

<div style="display: grid;grid-template-columns: 1fr 5fr;grid-gap: 0.5rem;">
  <div>asa</div>
  <div class="a">
    <div style="position: fixed;width: 100%;height: 100%;display: flex;">
      <div style="margin: auto;">heello</div>
    </div>
  </div>
</div>

Получается вот так, но heello не по центру второго блока.

Как это решить?

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

что бы центрировать элемент вы забыли добавить align-items: center; justify-content: center; в родительский див(в котором див с heello лежит)

<body>
     <div style="display: grid;grid-template-columns: 1fr 5fr;grid-gap: 0.5rem;">
    <div>asa</div>
    <div>
        <div style="position: fixed;width: 100%;height: 100%;display: flex; align-items: center; justify-content: center;">
            <div style="margin: auto;">heello</div>
        </div>
    </div>
</div>
</body>

▲ 0

У вас все центрируется, но вы зачем то используете position: fixed и задаете размер, из-за чего ваш блок выходит за пределы области видимости. Вы же задали grid-разметку с динамическими размерами, она сама растянет блоки до конца:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 0.5rem;
  min-height: 100vh;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
}
<body>
  <div class="container">
    <div>asa</div>
    <div class="content">
      <div>
        <div>heello</div>
      </div>
    </div>
  </div>
</body>

и еще непонятно зачем вы делаете такой бутерброд из вложенных div-ов, если вы их не используете. Уберите их, если они вам не нужны, меньше будете путаться в своем коде. Т.е. для вашего примера вполне достаточно написать так:

<body>
  <div class="container">
    <div>asa</div>
    <div class="content">heello</div>
  </div>
</body>