split a div into four equal div

Question

What I would like to do is as follows-

------------------------------------
|    ------------- -------------   |
|    |     1      |     2      |   |
|    |            |            |   |
|    ------------- -------------   |
|    |     3      |     4      |   |
|    |            |            |   |
|    ---------------------------   |
------------------------------------

So far I tried-

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;
}

<div id="top"></div>
<div id="bottom">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>

But all inner divs are left aligned. How can I align center horizontally within bottom div?

Answer 1

Use box-sizing: border-box; and you can use 50% because the border gets calculated in the percentage.

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: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  float: left;
  text-align: center;
  padding: 16px;
}

<div id="top"></div>
<div id="bottom">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>