在Bootstrap中水平和垂直放置太小的轮播图像

Question

我想在旋转木马中显示最大尺寸为220x220px的图像，但它们可以在一个或两个维度上更小。它应该在垂直和水平方向上居中，但不能拉伸。

旋转木马具有固定尺寸220x220px，所以应该很容易定位这样的图像：

left: 50%; /*move picture to the middle */
margin-left: -110px; /* go back to the center */
top: 50%;
margin-top: -110px;

但它不起作用。这些照片仍然贴在旋转木马的左上角。

我做了一个bootply来说明这个： http://www.bootply.com/freyja/JnJ1kc3d3G#

我还尝试了其他技术，例如使用table-cell技术和vertical-align，但它没有帮助。

Answer 1

您可以使用CSS3 transform水平和垂直居中元素：

position: relative; /* or absolute */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Demo