简单地设置图像边缘自动如下所示。

img{
 margin:auto;
 width:50%;
 height:auto;
}

检查这些例子

谢谢大家提供的线索。

我用了这个方法

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

这有点晚了，但这里有一个解决方案，我用垂直对齐元素在一个父div。

当您知道容器div的大小，但不知道包含的图像的大小时，这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。

以下是你应该尝试的发型:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

如果你知道父div和图像的大小，你可以使用绝对定位。

你可以设置图像的位置是对齐中心水平

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

div { position: absolute; border: 3px solid green; width: 200px; height: 200px; } img { position: relative; border: 3px solid red; width: 50px; height: 50px; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } <div class="center"> <img class="center" src="http://placeholders.org/250/000/fff" /> </div>

相关:居中图像