Center Content

A way to center a divs content.

HTML

<div id="parent">
  <div id="child"></div>
  <div id="child"></div>
  <!--   <div id="child"></div> -->
  <!--   <div id="child"></div> -->
  <!--   <div id="child"></div> -->
  <!--   <div id="child"></div> -->
  <!--   <div id="child"></div> -->
</div>

CSS

#parent {
  width: 500px;
  height: 500px;
  background: #ffcc5c;
  // This is required:
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  // For multi line centering:
  flex-wrap: wrap;
}

#child {
  background: #ff6f69;
  height: 100px;
  width: 100px;
  margin: 5px;
  // This is required:
  position: relative;
}