将 div 集中在另外 4 个 div 上

Question

我知道有很多 div 中心问题，但大多数只围绕 div 而不是围绕 divs... 我有 4 divs 宽度和高度相等。最重要的是，我想要另一个 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

Do you want something like this

然后将 position 更改为 relative 并相应地调整 margin

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

如@billy id 所述，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 {

}

If you want your div like this

然后只需将背景颜色添加到 .logoWrapper（默认情况下它是透明的）它已经在中心。如果它不适合您，只需将唯一 ID 添加到可能导致问题 div 的

居中 div 的最简单方法是

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

无需调整页边距属性足以居中 div。

Answer 2

您正在寻找这样的东西吗？ https://jsfiddle.net/81cLt6t6/

这就是我将框居中的方式

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

将 div 集中在另外 4 个 div 上

centering div on 4 other divs

html

css

centering