将div放在4个其他div上

Question

我知道有很多div居中的问题，但大多数只围绕div而不是围绕div ... 我有4个等于宽度和高度的div。 最重要的是，我希望有另一个div，但是在那些4之上居中（垂直和水平）。 我走到这一步：

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

出于某种原因，我不明白，这不会使div中心...它有点位于我的屏幕右侧！还是我疯了......？！

Answer 1

  

你想要这样的东西

然后执行此更改position至relative并相应调整margin

.logoWrapper {
    width: 270px;
    height: 150px;
    position: relative;
    left: 50%;
    top: 50%;
    margin: 0px 0 0 -135px;
    background: #FF0004;
}

正如@billy所述，id必须是唯一的

所以将您的代码更改为此

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

和css到此

#wrapper1,#wrapper2,#wrapper3,#wrapper4 {

}

  

如果你想要你的div

然后只需将背景颜色添加到.logoWrapper（默认为透明），它已经位于中心。如果它不在你的中心只是为那些可能导致问题的div添加唯一ID

以div为中心的最简单方法是

.logoWrapper {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

无需调整保证金，此属性足以使div居中。

Answer 2

你正在寻找这样的东西吗？ a HTTP POST request to the GCM service

这就是我把盒子放在中心的方式

.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

ID是唯一的，所以不要重复它们。

我不确定你想要实现的目标，但这是使用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>