这是正确的:

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;
}

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

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

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

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

使用Flexbox:

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}

来，试试这个。

.parentdiv { 身高:400 px; 边框:2px实心#cccccc; 背景:# efefef; 位置:相对; ｝ .childcontainer { 位置:绝对的; 左:50%; 上图:50%; ｝ .childdiv { 宽度:150 px; 身高:150 px; 背景:lightgreen; 这个特性:50%; 边框:2px纯绿色; margin-top: -50%; margin-left: -50%; ｝ < div class = " parentdiv”> < div class = " childcontainer”> < div class = " childdiv”> < / div > < / div > < / div >

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

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

检查这些例子

将图像垂直和水平居中的最好方法是使用两个容器，并应用以下属性:

外面的容器

应有显示:表;

内容器

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

一个演示

.outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>