html - 如何垂直居中图像？

Question

我正在寻找一种将图像垂直居中的方法，类似于text-align center. text-aligncenter 有点高效，因为您不需要指定父项的宽度或子项的宽度，它会自动将其内容居中。有没有其他方法可以做这样的事情来垂直定位图像？

Answer 1

你可以通过两种方式做到这一点

方式 1（首选），通过使用display: table-cell

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

演示

---

方式2，使用position: absolute;andtop: 50%比减去总height图像的1/2 usingmargin-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 */
}

演示 2

Answer 2

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

Answer 3

在父 div id parentDiv .. 在背景上设置图像

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

或在子 div 中做这件事......

position:absolute;
   top:50%;

Answer 4

都在中间...

<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/

Answer 5

您拥有的解决方案适用于旧浏览器，但在不久的将来（现在拥有 70% 的浏览器支持）您可以做到这一点，这是一个更简单、更优雅的解决方案：

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