Daniel Daniel -4 years ago 122
CSS Question

How to center an image in the middle of a div?

I need to center an image in a middle of a div.

<div class="main">
<img...>
</div>


In the example below the image is centered, but not in the middle.


https://jsfiddle.net/web_garaux/tng7db0k/

Answer Source

Simple and easy method to do this,

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display:flex;
  align-items:center;
  justify-content:center;
}
<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download