split a div into four equal div
<p>What I would like to do is as follows-</p>

<pre><code>------------------------------------
|    ------------- -------------   |
|    |     1      |     2      |   |
|    |            |            |   |
|    ------------- -------------   |
|    |     3      |     4      |   |
|    |            |            |   |
|    ---------------------------   |
------------------------------------
</code></pre>

<p>So far I tried- </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#top {
  width: 100%;
  background-color: red;
  height: 15%;
}
#bottom {
  width: 100%;
  background-color: blue;
  height: 85%;
}
.inner {
  width: 49%;
  height: 49%;
  border: 1px solid black;
  float: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="top"&gt;&lt;/div&gt;
&lt;div id="bottom"&gt;
  &lt;div class="inner"&gt;1&lt;/div&gt;
  &lt;div class="inner"&gt;2&lt;/div&gt;
  &lt;div class="inner"&gt;3&lt;/div&gt;
  &lt;div class="inner"&gt;4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>But all <code>inner</code> divs are left aligned. How can I align center horizontally within <code>bottom</code> div?</p>