Div在SVG标签内居中

Question

希望有人可以教我关于CSS和样式技巧。

我想要实现的目标： 只需使用css，将类名为redDiv的div定位在svg标记的中心 。 / p>

请参阅jsFiddle

上的示例代码段

我有一个带有myDiv类的div，里面有一个标签，在svg之后有一个名为redDiv的另一个div。

HTML片段

<div class="myDiv">
    <svg style ="background-color: blue;
        margin: 70px;
        padding: 5px;
        width: 150px;
        height: 150px;">
    </svg>
    <div class="redDiv"></div>
</div> 

我的CSS有以下样式：

.myDiv{
    background-color: Yellow;
    margin: 5px;
    padding: 5px;
}
.redDiv{
    background-color: #F00;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

我希望redDiv位于svg标签的中心。

请注意

1. svg标签的高度和宽度属性可以非常，这意味着svg可以是正方形或矩形。另外svg标签没有任何ID或类属性ans我不想添加一个！
2. 请不要将redDiv定位于myDiv
3. 您可以更改/添加额外的CSS属性为redDiv

Answer 1

如果你有固定的svg宽度，可能是：

position:absolute;
top:140px;
left:140px;

会有所帮助。

http://jsfiddle.net/CDmGQ/2664/