4 quadrant div with logo div in center

Question

I am looking to have 4 divs (2x2) with a logo div in the middle.

I came across this so far: Example found

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

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

This works perfect. All I would like to do is add a div right in the middle that would hold either a logo or text etc.

I have drawn up a basic example of what I would like it to look like.

use position absolute with the logo and make it in the center — Temani Afif, Mar 28 '18 at 11:28

score 4 · Accepted Answer · answered Mar 28 '18 at 11:30

Simply place a div over everything else with position for example:

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

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

4 quadrant div with logo div in center

1 Answers1