How do I make the div container horizontally aligned to center?

Question

Just want the #container to be centered. Tried many ways but failed.

How can I use pure CSS to center it?

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" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div><div id="container_green" style="position:absolute;left:5px">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask1">
            <circle cx="197.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask1)">
            <circle cx="200" cy="200" r="200" fill="rgba(0,153,0,1)"></circle>
            <mask id="backcirclemask1">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask1)">
              <g id="rect-group1">
                <rect x="60" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div></div>
</div>

Does this answer your question? [How can I horizontally align my divs?](https://stackoverflow.com/questions/9277311/how-can-i-horizontally-align-my-divs) — Calvin Nunes, Feb 11 '20 at 18:19
Actually I have read all the questions but still could understand way I can't make it. I tried the display-inline way, the translateX 50% way and the flex-box way. All of them failed. — AGamePlayer, Feb 12 '20 at 04:21

score -1 · Answer 1 · answered Feb 11 '20 at 18:23

I Centered the svg using flex, hope it helps.

body {
  text-align:center;
  display : flex;
  justify-content:center;
  align-items:center;
  min-height: 100vh;
}

<div id="app">
<div id="container"><div id="container_red">
        <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" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div><div id="container_green">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask1">
            <circle cx="197.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask1)">
            <circle cx="200" cy="200" r="200" fill="rgba(0,153,0,1)"></circle>
            <mask id="backcirclemask1">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask1)">
              <g id="rect-group1">
                <rect x="60" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div></div>
</div>

How do I make the div container horizontally aligned to center?

1 Answers1