另一种方法(此处未提及)是使用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;

通常，我将设置行高为200px。通常是这样的。

我将设置你的大div位置:相对;然后为你的形象这样做:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

这只是因为你知道图像和包含的div的尺寸。这也可以让你在包含的div中有其他项目…而使用行高之类的解决方案则不会。

编辑:注意…你的页边距是图像大小的负一半。

在div中

style="text-align:center; line-height:200px"

一个简单而优雅的解决方案，每次都适用于我:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

我有这个问题在HTML5中使用CSS3和我的图像在DIV中居中…哦，是的，我不能忘记我必须增加高度来显示图像…有一段时间我不知道它在哪里，直到我做了这个。我不认为位置和显示是必要的。

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;