Trying to center the #container but all methods have failed.
How can I achieve centering using only CSS?
body {
text-align:center;
}<div id="app">
<div id="container"><div id="container_red" style="position:absolute;left:0">
<svg style="opacity:1" class="noiseimg" width="400" height="400">
<mask id="outlinemask0">
<circle cx="202.5" cy="200" r="150" fill="#f00"></circle>
</mask>
<g mask="url(#outlinemask0)">
<circle cx="200" cy="200" r="200" fill="rgba(153,0,0,1)"></circle>
<mask id="backcirclemask0">
<circle cx="200" cy="200" r="200" fill="#fff"></circle>
</mask>
<g mask="url(#backcirclemask0)">
<g id="rect-group0">
<rect x="60" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="170" width="10...