4个象限div，中间有徽标div

Question

我希望在中间有4个div（2x2）和一个logo div。

到目前为止我遇到过这个问题：Example found

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  padding:50px;
}

.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding:50px;
}
.grid1 {
  border-right:1px solid;
  border-bottom:1px solid;
}
.grid2 {
  border-bottom:1px solid;
  border-left:1px solid;
}
.grid3 {
  border-top:1px solid;
  border-right:1px solid;
}
.grid4 {
  border-left:1px solid;
  border-top:1px solid;
}

＆＃13;

<div class="info-box">
  <div class="info-item grid1">1</div>
  <div class="info-item grid2">2</div>
  <div class="info-item grid3">3</div>
  <div class="info-item grid4">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这很完美。我想做的就是在中间添加一个div，它可以包含徽标或文本等。

我已经拟定了一个基本的例子，我希望它看起来像。

Answer 1

只需使用div将position放在其他所有内容上，例如：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  padding:50px;
}
.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding:50px;
}
.grid1 {
  border-right:1px solid;
  border-bottom:1px solid;
}
.grid2 {
  border-bottom:1px solid;
  border-left:1px solid;
}
.grid3 {
  border-top:1px solid;
  border-right:1px solid;
}
.grid4 {
  border-left:1px solid;
  border-top:1px solid;
}
.logo {
  width: 50%;
  height: 100px;
  position: absolute;
  left: 25%;
  top: 150px;
  border: 1px solid;
  background: #fff;
  line-height: 100px;
}

＆＃13;

<div class="info-box">
  <div class="info-item grid1">1</div>
  <div class="info-item grid2">2</div>
  <div class="info-item grid3">3</div>
  <div class="info-item grid4">4</div>
  <div class="logo">LOGO</div>
</div>

＆＃13;

＆＃13;

＆＃13;