中心2 div，中间有一个图像

Question

最初我有一个图像，在div上，图像居中于圆角div。现在我需要两种颜色，一个外部div和内部div。问题现在图像并没有像我之前的单个div那样停留在中间。下面是我的CSS以及我如何调用我的HTML。

#redIcon {
 width: 50px;
  height: 50px;

  overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #ff0000;
    -webkit-box-shadow: 0 1px 3px #ff0000;

    background-color: #ff0000;
    position: relative;
    border: 5px solid #ff0000;
}
#smallerPinkIcon {
 width: 30px;
  height: 30px;

  overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #FA58F4;
    -webkit-box-shadow: 0 1px 3px #FA58F4;

    background-color: #FA58F4;
    position: relative;
    border: 5px solid #FA58F4;



}

.imgTest { 
    width: 30px; 
    height: 30px; 

    border-radius:5px; 
    overflow: hidden; 




     position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -15px;
   margin-top: -15px;



}


<div id="redIcon">
                        <div id="smallerPinkIcon">

                           <img class="imgTest" src="imgcc/g.png"  border="0">
                          </div>
                    </div>
                  </div>

Answer 1

由于您希望内部<div>和<img />具有相同的宽度和高度，因此您可以尝试对齐内部<div>而不是<img />

删除了以前的代码段

这是演示http://jsfiddle.net/hT4DD/1/的小提琴。

修改

根据评论，您可以尝试以下CSS。这个演示在每个div中给出了完全覆盖内部元素的边框。因此图像看起来在垂直和水平方向都居中。

#redIcon {
    background-color: #ff0000;
    border-radius:5px;
    display:inline-block;
    border: 5px solid #ff0000;
    font-size:0;
}

#smallerPinkIcon {
    background-color: #FA58F4;
    border-radius:5px;
    display:inline-block;
    border: 5px solid #FA58F4;
    font-size:0;
}

.imgTest { 
    width: 30px; 
    height: 30px; 
    border-radius:5px; 
}

以下是演示http://jsfiddle.net/hT4DD/4/的新小提琴。

Answer 2

smallerPinkIcon 将属性显示为内嵌块。

redIcon 添加text-align属性并将其设置为 center ，将显示属性设置为 table-cell ，并将vertical-align设置为的中间

当您更改div的大小时，img将垂直和水平保持居中。

编辑：如果您只想水平居中，请关闭 display：table-cell 和 vertical-align：middle 样式。

EDIT2：现在看看我的提示。