像设置背景位置一样在div内居中放置图像

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> 

Answer 2

You could do it like so:

 .image-wrap { width: 50vw; height: 720px; background: url('some-images.jpg') no-repeat center center / auto 100%; position: relative; } img { position: absolute; top: 50%; left: 50%; margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */ margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */ } 

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

Answer 3

You could use transform: translate

 .image-wrap { position: relative; height: 400px; text-align: center; border: 1px dashed gray; } .image-wrap img { position: relative; top: 50%; transform: translateY(-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/200" alt="some image here"/> </div> 

Now, if you want it to behave as background-size: auto 100% does, do like this

 .image-wrap { position: relative; height: 200px; border: 1px dashed gray; overflow: hidden; } .image-wrap img { position: relative; height: 100%; left: 50%; transform: translateX(-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

And here is a version behaving as background-size: cover does

 .image-wrap { position: relative; height: 200px; overflow: hidden; border: 1px dashed gray; margin-bottom: 10px; } .image-wrap img { position: relative; min-height: 100%; min-width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

And this version behaving as background-size: contain does

 .image-wrap { position: relative; height: 200px; overflow: hidden; border: 1px dashed gray; margin-bottom: 10px; } .image-wrap img { position: relative; max-height: 100%; max-width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

Answer 4

 .parent-div { width: 50vw; height: 720px; position: relative; z-index: 1; } .image-wrap { background-position: 50% 50%; background-size: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } 

 you can use like this <div class="parent-div"> <div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div> </div> 

Answer 5

This is where FlexBox properties become very useful. You can set align-items: center; on a container to (by default) vertically center any child elements. Here's an example: https://jsfiddle.net/ks62qtns/

The advantage of this is that you don't need to know the dimensions of any of the elements involved in the layout - which is very useful for responsive designs and/or dynamic content.

Flex properties are reasonably well supported in modern browsers. You might need fallbacks to support older versions of IE (if you need to)

HTML:

<div class="container">
  <div class="content">
    <h1>
    Content. Any Content.
    </h1>
    <p>
    I might have anything in me!
    </p>
  </div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #EEE;

  /* This is just to make a big container. You can set the dimensions however you like.*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  background: #89D485;
  padding: 2rem;
  text-align: center;
}

Answer 6

This is the most over thought out problem that most developers run into. If the object is inside another object you are able to just use margin: 0 auto; inside the CSS. This will make the left and right ways to line up correct. This also then works for all media queries from small screen to large screens.

Answer 7

You can use jquery to calculate the width of the div and image.

$(img).css({
    position: "absolute",
    left: ($(img).parent().width() - $(img).width()) / 2
});

This would mean: ((width of div)-(width of image))/2

This would center image perfectly.

Answer 8

just do it like this.set the container's property "text-align:center",make it is the inline-block element and 100% height，then can get what you want.

.image-wrap{
    width: 50vm;
    height: 720px;
    text-align: center;
}
.image-wrap img{
    display: inline-block;
    height: 100vm;
}