Blog Details

Using Flexbox to center responsive element. For This exercise we use an image as the element within a div. This methode can be used for just about any type of html element.

CSS

.mybox {
  height: 35vh; // height of div responsive to 35% of viewport
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 1px dashed black;
}

.responsive {
  width: 100%;
  max-width: 360px;
  height: auto;
}

HTML

<div class="mybox">
  <img src="images/flexbox.jpg" alt="example image" class="responsive" >
</div>

Example of how to center responsive element