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

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

这对我很管用。将此添加到image css:

img
{
   display: block;
   margin: auto;
}

当然，另一种方法是使用valign创建一个表。不管你是否知道div的高度，这都可以工作。

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

但只要可能，您应该始终坚持只使用CSS。

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

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

这是正确的:

display: block;
margin-left: auto;
margin-right: auto 

否则，如果上面只给你水平居中，试试这个:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

另一种方法(此处未提及)是使用Flexbox。

只需在container div上设置以下规则:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

小提琴

div { 宽度:200 px; 身高:200 px; 边框:1px纯绿色; 显示:flex; justify-content:中心; /*对齐水平*/ 对齐项目:中心; /*垂直对齐*/ ｝ < div > < img src = " http://lorempixel.com/50/50/food " alt = " / > < / div >

要了解Flexbox的一些特性并获得最大限度的浏览器支持的语法，最好从flexyboxes开始

此外，现在的浏览器支持也相当不错:caniuse

对于显示:flex和align-items的跨浏览器兼容性，您可以使用以下命令:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;