centering div on 4 other divs - html

Question

I know there are a lot of div centering questions but most only revolve that div and not surrounding divs...
I have 4 divs equal of width and height.
On top of that, I would like to have another div but centered (vertical & horizontal) above those 4.
I came this far:
<div class="content">
<div class="logoWrapper"></div>
<div class="topleft" id="wrapper"></div>
<div class="topright" id="wrapper"></div>
<div class="bottomleft" id="wrapper"></div>
<div class="bottomright" id="wrapper"></div>
</div>
.logoWrapper {
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
#wrapper {
width: 49%;
height: 49%;
float: left;
background-color: #79be53;
border-color: white;
border-radius: 1%;
border-style: solid;
}
For some reason I dont understand yet this does not center the div...its a bit to the right of my screen! Or am I going crazy...?!

Answer 1

Do you want something like this
Then do this change position to relative and adjust margin accordingly
.logoWrapper {
width: 270px;
height: 150px;
position: relative;
left: 50%;
top: 50%;
margin: 0px 0 0 -135px;
background: #FF0004;
}
As mentioned by #billy id needs to be unique
so change your code in to this
<div class="content">
<div class="logoWrapper"></div>
<div class="topleft" id="wrapper1"></div>
<div class="topright" id="wrapper2"></div>
<div class="bottomleft" id="wrapper3"></div>
<div class="bottomright" id="wrapper4"></div>
</div>
and css to this
#wrapper1,#wrapper2,#wrapper3,#wrapper4 {
}
If you want your div like this
Then just add background color to .logoWrapper(Its transparent by default) its already in center. If its not in center for you just add unique id to those div's that might be causing issue
The easiest way to center div will be
.logoWrapper {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
No need to adjust margin this property is enough to center div.

Answer 2

Are you looking for something like this? https://jsfiddle.net/81cLt6t6/
This is how I centered the box
.logoWrapper {
width:270px;
background-color: red;
height:150px;
position:absolute;
left: calc(50% - 135px);
top: calc(52% - 75px);
/*margin:-75px 0 0 -135px;*/
z-index: 9999;
}

Answer 3

IDs are unique, so don't repeat them.
I'm not quiet sure what you are trying to achieve, but here is a snippet using calc
.content {
position: relative
}
.logoWrapper {
width: 270px;
height: 150px;
position: absolute;
left: calc(50% - 135px);
top: calc(50% + 135px);
background: blue
}
.wrapper {
width: 49%;
height: 49%;
min-height: 200px;
float: left;
background-color: #79be53;
border-color: white;
border-radius: 1%;
border-style: solid;
}
<div class="content">
<div class="logoWrapper"></div>
<div class="topleftt wrapper"></div>
<div class="topright wrapper"></div>
<div class="bottomleft wrapper"></div>
<div class="bottomright wrapper"></div>
</div>