Два div по центру одного flex?

#css #css3 #вёрстка #flexbox

Как выравнивать оба блока 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;
}

  

  





Должно быть так:

    

Ответы

Ответ 1

Вы можете получить данное положение через отрицательные 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: "";
}

  

  




Ответ 2

К .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;
}