html - Div 在 SVG 标签内居中

Question

希望有人能教我 CSS 和样式技巧。

我想要实现的目标:仅通过使用 css 将带有类名 redDiv 的 div 定位在 svg 标签的中心。

请参阅 jsFiddle 上的示例代码片段

我有一个类为 myDiv 的 div，在其中我有一个名为 tag 的标签和另一个类名为 redDiv 的 div，在 svg 之后。

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 标签的height 和width 属性可以很宽，也就是说svg 可以是正方形也可以是长方形。另外 svg 标签没有任何 ID 或类属性，我不想添加一个!
2. 请不要相对于 myDiv 定位 redDiv
3. 您可以更改/添加额外的 CSS 属性到 redDiv

Answer 1

如果你有固定宽度的 svg，也许:

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

会有帮助。

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