как выровнить абсолютно-спозиционированный элемент по центру?

Question

есть .block и .block-inner их ширина и высота не постоянны(но блок-инер меньше). надо чтобы блок инер был по центру в родительском блоке блоке

.block {
 position: relative;

 width: 50%; //условно
 heigh: 20%; //условно

 background-color: blue;
}
.block-inner{
 position: absolute;
 width: 100%;
 width: 50%;

 background-color: yellow;
}

Answer 1

У родительского блока должна быть какая-то высота. Вот эти ваши heigh: 20%; это не правильная запись.... На пример min-height:300px; height:100%; Тогда что бы выровнять потомка будет достаточно написать

.bl{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100px;
  height:100px;
  background:#000;
}

<div class="bl"> </div>

БЛОГ НА HUSL

как выровнить абсолютно-спозиционированный элемент по центру?

Ответы (1 шт):