Flex box no1: centering

by Richard Hunter

HTML

<div class="parent">
    
    <div class="child"></div>
</div>

SCSS

.parent {
  display: flex;
  height: 400px; /* Or whatever */
  background : yellow;
}

.child {
  background : red;
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}