无法在旋转木马上垂直对齐图像

Question

你好 我有这个网站www.acigaiabeta.esy.es，即时通讯试图将旋转木马的图像垂直对齐到中心，但它始终坚持顶端。 我甚至试图遵循这个提示How to vertically align an image inside div，但仍没有改变的地方。 在大的图像上theres没有什么大不了的，但小图像有问题，图像大小是随机的。 我在想什么？

.carousel .item { 

    vertical-align: middle; 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    vertical-align: middle; 
    max-width: 100%; 
    height: auto; 
    margin: auto; 
    top:auto; 
-webkit-transition: 0.6s ease-in-out left; 
-moz-transition: 0.6s ease-in-out left; 
-o-transition: 0.6s ease-in-out left; 
transition: 0.6s ease-in-out left; 

} 

我只试图通过CSS我尝试使用顶部，垂直对齐：像上面的中间显示上面没有任何作品。

Answer 1

这里有您需要的CSS：

#myCarousel img { 
    position: absolute; 
    max-width: 100%; 
    max-height: 100%; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -moz-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     -o-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
} 

Answer 2

试试吧。

.first-slide { 
 
    position: abolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}