css - 垂直居中图像

Question

我为图片库开发了一个网站。目前，每个图像都与顶部对齐，我希望图像位于 DIV 的中心。

这是我的代码：

.carousel .item {
  height: 900px;
  background-color: #777;
}
.carousel-inner > .item > img {
    top:5%;
    display: block;
    margin-left: auto;
    margin-right: auto  
}

这是我的网站链接，也可以看到它的实际效果：http: //www.canninginc.co.nz/canluciddream/screenshots.html

最后一张图片就是一个很好的例子。这是一个小图像，我希望它垂直放置在中心。

Answer 1

试试这个 CSS

.carousel .item {
        position:relative;
        height: 900px;
        background-color: #777;
}
.carousel-inner > .item > img {
        display: block;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
 }

试试这个，非常有用的绝对水平和垂直居中在 CSS