1

Нужно помощь в отцентрировании 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>

2
  • если cont1 поставить длину 100px, то cont2 уже будет не по центру относительно cont1, а от края --- так у вас cont1 width: 200px; Может быть задать ширины в % 14 июн 2022 в 17:27
  • У двух блоков фиксированная длина. Если cont2 длиннее, чем cont1, то края cont2 должны выходить за границы cont1.
    – Vanya
    14 июн 2022 в 17:31

2 ответа 2

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>

9
  • 1
    Добавил пример, не растягивается, посмотрите. Сделал специально cont1 высоту чуть больше для наглядности 14 июн 2022 в 17:39
  • 1
    Как cont2 может быть в центре, если у него ширина 200, а у cont1 ширина 100 ? 14 июн 2022 в 17:43
  • 1
    Ну вот я и хочу того добиться, если длина cont1 меньше, чем у cont2, то часть блока cont2 как бы уходит за левый край.
    – Vanya
    14 июн 2022 в 17:47
  • 1
    мне кажется нашел решение, сейчас выложу 14 июн 2022 в 17:59
  • 1
    Добавил, смотрите, как такой вариант? 14 июн 2022 в 18:03
0

Старый добрый способ позиционирования по центру с использованием 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>

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

Ваш ответ

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

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