CSS flexbox – align div vertically and horizontally in center

CSS flexbox can be used to align a div in center of container div both vertically and horizontally. Use the flexbox with following properties:

1. justify-content: center (to align flex-item horizontally in center)
2. align-items: center (to align flex-item vertically in center)

<style>
.fbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; height:100px; background-color:gray;
}
.child {
  background-color:green;
}
</style>

<div class=fbox>
<div class="child">div in center</div>
</div>

Related

• CSS - align div in center vertically