在父级中对齐SVG

Question

I'm learning SVG and getting a bit of help from here. This is my code: http://jsfiddle.net/C8d34/6/

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

How can I align my circle so it sits horizontally aligned within the blue box and is aligned to the bottom vertically. I believe it is something to do with:

x="50" y="0"

But I haven't had any luck with that, it still doesn't sit in the right place.

Answer 1

svg {
    height: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
}

Try this. Fiddle http://jsfiddle.net/C8d34/10/

Answer 2

svg {
vertical-align: middle;
display:inline-block;
}