CSS居中图片

Question

I have one question about image centering.

I have created this DEMO from codepen.io.

In this demo you can see i have used background image for centering it looks good for me.

The image normalize looking like this: NORMALIZE

The question is how can use img tag instead of background and change the html like:

<div class="centered-image">
<img src="IMAGE-URL"/>
</div>

Answer 1

Use display: flex and let the img tag have width:100% . DEMO

 .centered-img{ width:540px; height:200px; margin:0px auto; margin-top:50px; display:flex; justify-content:center; align-items:center; overflow:hidden; } .centered-img img{ width: 100%; } 

 <div class="centered-img"> <img src="http://i.imgur.com/BXo4qAz.jpg" /> </div> 

Answer 2

Vertical centering is most easily done with flex box. This will also center horizontally.

.centered-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

You still need to set proportions on .centered-image , because it would otherwise just stretch to the height of the image and there wouldn't be any vertical alignment happening.

Please check this example . I resized the image to demonstrate the aligning, even on smaller screens.

Answer 3

try this:

img{
display: block;
margin: 0 auto;
}

Answer 4

Please check the fiddle - https://jsfiddle.net/afelixj/k37125ux/

html, body{
   height: 100%;
}
.centering-image{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}