title: CSS <div> square
body: <p>I'am new into basics of <code>HTML</code> and <code>CSS</code>.</p>
  
  <ol>
  <li><p>Trying to create 3 x 3 square "picture", using , but can't find simple solution to put squares in the middle of the page, like nine square in center. </p></li>
  <li><p>How to put all squares in the big bordered square?</p></li>
  </ol>
  
  <p>How can we achieve this?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;  
      &lt;div class="square-one"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-two"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-three"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-four"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-five"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-six"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-seven"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-eight"&gt;
      &lt;/div&gt;
  
      &lt;div class="square-nine"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background-color: #000000;
      font-size: 150px;
  }
  
  div {
      background: #FFFFFF;
      width: 275px;
      height: 275px;
      margin: 10px 10px 10px 10px;
      float: left;
  }
  </code></pre>