title: How to make the row and column in the cneter of div?
body: <p>The below code shows 3 columns on the left of the page, how to make these columns in the center?</p>
  <p>css file</p>
  <pre><code>.column {
    float: left;
    width: 12%;
    padding: 10px;
    height: 300px;
  }
  
  .row:after {
    content: &quot;&quot;;
    display: table;
    clear: both;
  }
  </code></pre>
  <p>html file</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;column&quot; style=&quot;background-color:#aaa;&quot;&gt;
      &lt;h2&gt;Column 1&lt;/h2&gt;
      &lt;p&gt;Some text..&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;column&quot; style=&quot;background-color:#bbb;&quot;&gt;
      &lt;h2&gt;Column 2&lt;/h2&gt;
      &lt;p&gt;Some text..&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;column&quot; style=&quot;background-color:#ccc;&quot;&gt;
      &lt;h2&gt;Column 3&lt;/h2&gt;
      &lt;p&gt;Some text..&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MCvKk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCvKk.png" alt="enter image description here" /></a></p>