html - Center 2 div，中间有一张图片

Question

最初我有一张图片，在 div 上，图片以圆 Angular 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 />

删除了之前的片段

这是一个 fiddle 演示 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; 
}

这是演示的新 fiddle http://jsfiddle.net/hT4DD/4/ .