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)
.fbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; height:100px; background-color:gray;
.child {

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


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


Click here to write/view comments