How to center image vertically?

问题:

I am looking for a way to center the image vertically, something that is similar to text-align center. text-align center is kinda efficient since you don't need to specify the width of the parent or the width of the children, it will automatically center its content. Is there any other way to do something like this for positioning image vertically?

回答1:

You can do it in 2 ways

Way 1 (Preferred), by using display: table-cell

div {
    display: table-cell;
    height: 100px;
    border: 1px solid #f00;
    vertical-align: middle;
}

Demo

---

Way 2, Using position: absolute; and top: 50% and than deduct 1/2 of the total height of the image using margin-top

div {
    height: 100px;
    border: 1px solid #f00;
    position: relative;
}

div img {
    position: absolute;
    top: 50%;
    margin-top: -24px; /* half of total height of image */
}

Demo 2

回答2:

div{
    display:table-cell;
    vertical-align:middle;
}

回答3:

in a parent div id parentDiv .. set image on background

#parentDiv
{
background:url(image.png) no-repeat center center;
height:500px;
width:500px;
}

or in child div do this thing...

position:absolute;
   top:50%;

回答4:

All in the middle ...

<div id="container">
    <div id="img"></div>
</div>

#container {
    position: relative;
    width:200px;
    height:200px;
    background:#040;
}
#container #img {
    background: url("url_to_image.jpg") no-repeat center center;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

http://jsfiddle.net/djwave28/PD6J4/

回答5:

The solution you've got works for old browsers but in the near future (right now has like the 70% of the browser support) you can do this, a much simpler and elegant solution:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}