javascript - Center image inside a div like setting background position

Question

Are there any ways that we can set a tag inside a div perfectly center no matter what is the width and height of that div? In other way, I want to set an image position inside a div tag like a center background. For example:

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

I want to set an image inside a div like a background above with auto width and 100% height so that all the important content in an image will be in the center of the div.

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

Thank you very much!

Answer 1

You can center it easily using flex property. Demo here

.image-wrap {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: dotted 1px #CCC;
}

<div class="image-wrap">
  <img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>