css - 将一个div分成四个相等的div

Question

我想做的是如下-

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

到目前为止我试过-

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>

但所有 inner div 都是左对齐的。如何在 bottom div 中水平居中对齐？

Answer 1

使用 box-sizing: border-box; 并且您可以使用 50%，因为边框是按百分比计算的。

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>