Центрирование нескольких элементов с помощью display flex

Я хочу центрировать div в абсолютном центре страницы с помощью justify-content: center и align-items: center, но div должен иметь ширину и высоту 100% страницы, чтобы быть в абсолютном центре.

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

Вот страница https://jsfiddle.net/nybf8tjc/1. Я мог бы просто добавить

.typewriter{margin-top: -41px;}

чтобы исправить это, но я чувствую, что должен быть лучший способ сделать это.


html css flexbox centering
person M. GR.    schedule 17.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать .typewriter абсолютно позиционированным элементом и добавить обычные настройки для центрирования, например

.typewriter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  etc.
}

В действии: https://jsfiddle.net/de3rf65j/

person Johannes    schedule 17.07.2017

arrow_upward
0
arrow_downward

Вы можете просто достичь этого, используя это.

div.father {
  width: 100vw;
  height: 100vw;
  
  position: absolute;
  
  display: flex;
  align-items: center;
  justify-content: space-around;
 }
 
 div.father div.child {
  width: 400px;
  height: 250px;
  
  background-color: teal;
  
  position: relative;
  }
<div class="father">
  <div class="child"></div> 
</div>

Также вы можете использовать свойство transform:

div.child {
  width: 400px;
  height: 250px;
  
  margin:0;
  padding: 0;
  
  
  background-color: teal;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}

Это должно центрировать контейнер, который вы хотите. Посмотрите https://css-tricks.com/snippets/css/a-guide-to-flexbox/

person Community    schedule 17.07.2017