旋转木马中图像的CSS中心对齐

我使用旋转木马的图像显示，但我想迎合它的所有类型的图像尺寸的用户上传。我调整了所有图像的大小，然后将其显示在旋转木马中，但我似乎无法进入中心。我在li标签或img标签中尝试了margin:auto/text align:center，但它似乎对我不起作用。下面是一些显示空位的旋转木马示例，图像应显示在中心

图像受宽度限制

受高度限制的图像

我想在这里实现的是，使图像显示在中心，或者它受到宽度或高度的限制。这就是我的图像的渲染方式

<div class="fanpageCarousel" ng-controller="FanCarouselCtrl"
ng-init="getImage()">
<ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3"
    rn-carousel-pause-on-hover="true">
    <li ng-repeat="image in slides"><img ng-src="{{image.src}}" /></li>
</ul>

这里是链接

---

希望有人能给我一些帮助。。谢谢

对CSS进行以下更改：

.fanpageCarousel img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.fanpageCarousel li {
    height: 450px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

简而言之，每个

img

周围的容器（

li

）需要设置为

位置：相对

以允许

img

相对于它定位<代码>高度需要在

li

上专门设置，才能工作<代码>文本对齐：居中是旧浏览器的一种后备方法，它至少可以将

img

水平居中。设置<代码>位置：绝对，

页边距：自动和
底部
，
左侧
，
右侧
和
顶部
到
0
是
img
在
li
中居中的原因

JS小提琴：

.fanpageCarousel img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.fanpageCarousel li {
    height: 450px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

你能创建一个JSFIDLE来演示这个问题吗？@Hiddenhobes这是JSFIDLE链接，你可以看到如果我添加不同维度的图像，这里和那里都会有空白。。。我想做的是把所有这些不同的图片放在中间，让它看起来更像样…非常感谢你的帮助，伙计。。。您的解释指导了我对这些旋转木马画廊的后续实施。。。干杯，伙计。。祝您愉快：）