中心内容和叠加图-地图-SVG

Question

我无法将地图和图形居中并叠加两个图层。我对位置：相对和位置：绝对有点困惑。

 HTML
<div style="text-align:center">
<p>Hello World!</p>
<figure id="mapa">
<img src="mapa.png" width="500" height="500" usemap="#map"/>
<svg width="500" height="500">
    <line x1="10" y1="100" x2="60" y2="100" stroke="red"/>
    <line x1="60" y1="100" x2="200" y2="300" stroke="red"/>
<line x1="200" y1="300" x2="400" y2="400" stroke="red"/>
</svg>
</figure>
</div>
CSS
<style>
figure{
position:relative;
}
img{
position:absolute;
}
svg{
position:absolute;
}
</style>

这是一个小提琴：

https://jsfiddle.net/z3qf8u2e/

Answer 1

只需使用margin : 0 auto而不是 https://jsfiddle.net/1zhdrvje/