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>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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