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 that you have read and understand our privacy policy and code of conduct.

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