Отцентрировать блок внутри блока

Question

Нужно помощь в отцентрировании cont2 относительно cont1. Когда длина cont1 больше, чем cont2, то все отлично. Но если cont1 поставить длину 100px, то cont2 уже будет не по центру относительно cont1, а от края.

Вот что я хочу получить:

.cont1 {
    width: 400px;
    height: 200px;
    background: red;
    overflow: hidden;
}

.cont2 {
    width: 200px; 
    height: 200px;
    background: blue;
    color: white;
    margin: 0 auto; 
}

<div class="cont1">
    <div class="cont2">Test</div>
</div>

Answer 1

Если такой вариант ???

.wrapp {
  display: flex;
  justify-content: center;
}

.cont1 {
  width: 100px;
  height: 250px;
  background: red;
  position: relative;
}

.cont2 {
  width: 200px;
  height: 200px;
  background: blue;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapp">
  <div class="cont1">
    <div class="cont2">Test</div>
  </div>
</div>

Answer 2

Старый добрый способ позиционирования по центру с использованием position: absolute и transform.

.cont1 {
  width: 100px;
  height: 200px;
  position: relative;
  margin: auto;
  box-shadow: 0 0 0 2px blue;
}

.cont2 {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 2px red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* for demo */
body {display: flex; min-height: 100vh; margin: 0; overflow: hidden;}
.cont2 {max-width: 100vw; max-height: 100vh; overflow: hidden; resize: both;}

<div class="cont1">
  Test
  <div class="cont2"></div>
</div>

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

БЛОГ НА HUSL

Отцентрировать блок внутри блока

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