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>
refresh

Related

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments