我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..


当前回答

这是正确的:

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。

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

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

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

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

当然,另一种方法是使用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。

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

img
{
   display: block;
   margin: auto;
}

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

在CSS中这样做:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}