3

Как выравнивать оба блока child по центру родительского? Без position: absolute; с помощью flex-атрибутов это возможно?

.parent {
  display: flex;
  flex-flow: column nowrap;
  background: #cccccc;
}
.child1 {
  width: 50vh;
  height: 50vh;
  background: red;
  margin: auto;
  border: 1px solid #cccccc;
  transition: ease 5s;
}
.child2 {
  width: 10vh;
  height: 10vh;
  margin: auto;
  background: green;
  cursor: pointer;
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
Должно быть так: введите сюда описание изображения

4
  • А можете рассказать что именно у вас не получается? В исполняемом я вижу что оба div по центру. 18 янв 2017 в 12:16
  • @VadimOvchinnikov нужно что бы зеленый был по центру красного. при том, что зеленый в html нельзя вложить в красный
    – nueq
    18 янв 2017 в 12:17
  • За такими условиями без абсолюта ни как. У вас они должны бить на разных слоях разнесены. 18 янв 2017 в 12:24
  • @BlackStar1991 я так и написал, просто плохо разбираюсь во всех атрибутах flex-box поэтому решил спросить, может можно как-то им это реализовать без абсолюта
    – nueq
    18 янв 2017 в 12:26

2 ответа 2

5

Вы можете получить данное положение через отрицательные margin. При этом помните, что для элементов flex можно задавать z-index, которые будут работать даже без абсолютного позиционирования, определяя кто на кого "залазит". Присваиваете child2 margin-top: -30vh — это половина высоты .child1 (25vh) + половина высоты child2 (5vh). Далее чтобы из-за этого границы parent не вылезли выше добавляете

.parent:after {
  /* половина высоты .child1 - половина высоты .child2 */
  margin-bottom: 20vh;
  content: "";
}

Весь код:

.parent {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  background: #cccccc;
}

.child1 {
  width: 50vh;
  height: 50vh;
  background: red;
  margin: auto;
  border: 1px solid #cccccc;
  transition: ease 5s;
}

.child2 {
  width: 10vh;
  height: 10vh;
  margin: auto;
  background: green;
  cursor: pointer;
  margin-top: -30vh;
}

.parent:after {
  margin-bottom: 20vh;
  content: "";
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

0

К .parent добавьте свойства align-items: center; и justify-content: center;

.parent {
  display: flex;
  align-items: center;
  justify-content: center; 
  flex-flow: column nowrap;
  background: #cccccc;
}
.child1 {
  width: 50vh;
  height: 50vh;
  background: red;
  border: 1px solid #cccccc;
  transition: ease 5s;
}
.child2 {
  width: 10vh;
  height: 10vh;
  background: green;
  cursor: pointer;
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

3
  • видимо нет, прикрепил к вопросу скрин как должно выглядеть
    – nueq
    18 янв 2017 в 12:24
  • @nueq Сейчас подумаю еще. 18 янв 2017 в 12:26
  • @nueq обновил пример. 18 янв 2017 в 12:32

Ваш ответ

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

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