Question

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

Answer 1

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

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

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

Demo

方式2，使用position: absolute;和top: 50%，然后使用height

扣除图像总margin-top的1/2

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

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;
    }
}

如何垂直居中图像？

5 个答案: