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

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

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

Ответ

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