Child div 没有回应 parent 的亲戚属性

Question

我正在尝试创建两个部门。基本上是两个 50% 的 div 相邻。我试图将 div 垂直居中，我通常使用这段代码来居中 vertically/horizontally:

text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);

但是，在这种情况下，我的 child div green-grid-left 和 green-grid-right 似乎没有响应 green 的 position: relative。

谁能告诉我为什么我的两个 div 没有在各自 50% 块的中间对齐？

.green {
 background-color: rgb(69,186,149); /*--Maybe this    background: #00a16d; ---*/
 width: 100%;
 height: 400px;
 position: relative;
}
#green-grid-left {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 /*text-align: center;
 margin: auto;*/
 width: 50%;
 height: 90%;
 float: left;
}
#green-grid-left-description {
 color: #FFF;
 font-size: 2.3em;
}
#green-grid-right {
 width: 50%;
 height: 90%;
 float: right;
}
#green-grid-right-description {
 color: #FFF;
 font-size: 2.3em;
}

<div class="green">
  <div id="green-grid-left">
   <div id="green-grid-left-description">Website problems?<br>
   We handle everything for you.</div>
  </div>
  <div id="green-grid-right">
   <div id="green-grid-right-description">Website problems?<br>
   We handle everything for you.</div>
  </div>
 </div>

Answer 1

您已经为他们定义了一个职位，因此他们将采用您定义的职位（绝对）并忽略其父职位。如果您希望他们从其父级继承位置，您需要将他们的位置设置为 inherit，例如：

#green-grid-left {
    ...
    position: inherit;
    ...
}

#green-grid-right {
    ...
    position: inherit;
    ...
}

position默认是不继承的，需要继承的话需要自己设置。检查 w3Schools.

Answer 2

您不必绝对定位元素。相对放置它们并且仅垂直对齐它们。您实际上并不希望它们水平居中。为此使用保证金 https://jsfiddle.net/3tejdtq5/

<div class="parrent">
<div class="left child"></div>
<div class="right child"></div>
</div>

div{
  box-sizing: border-box;
}
.parrent{
  width: 100%;
  height: 400px;
  border: 1px solid black;
  font-size: 0;
}

.child{
  position: relative;
  top: 50%;
  transform: translate(0%,-50%);
  width: 35%;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

.left{
  margin: 0 5% 0 10%; 
}

.right{
  margin: 0 10% 0 5%;
}

或更好的东西

<div class="parrent">
<div class="child"></div>
<div class="child"></div>
</div>

.parrent{
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
}

.child{
  width: 35%;
  height: 100px;
  border: 1px solid red;
  margin: auto;
}

https://jsfiddle.net/t9e4vroo/

Answer 3

如果您将绝对位置设置为顶部属性到 50% 并将 X 属性平移到 -50%，您的元素将位于 [=22] 的 X 中心=].因为它转换为 children 宽度的 X -50%。如果你想要一个 children 在左边，另一个在右边，并且都垂直居中，你可以用绝对位置这样做，然后翻译属性 :

.green {
 background-color: rgb(69,186,149); /*--Maybe this    background: #00a16d; ---*/
 width: 100%;
 height: 400px;
 position: relative;
}
#green-grid-left {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 25%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 width: 50%;
 height: 90%;
}
#green-grid-left-description {
 color: #FFF;
 font-size: 2.3em;
}
#green-grid-right {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 75%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 width: 50%;
 height: 90%;
}
#green-grid-right-description {
 color: #FFF;
 font-size: 2.3em;
}

<div class="green">
  <div id="green-grid-left">
    <div id="green-grid-left-description">
      Website problems?<br>
      We handle everything for you.
    </div>
  </div>
  <div id="green-grid-right">
    <div id="green-grid-right-description">
      Website problems?<br>
      We handle everything for you.
    </div>
  </div>
</div>

Answer 4

使用 flexbox 就容易多了：

.green {
  background-color: rgb(69, 186, 149);
  /*--Maybe this    background: #00a16d; ---*/
  width: 100%;
  height: 400px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.green > div {
  flex: 0 0 40%;
  height: 90%;
  border: 1px solid green;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#green-grid-left-description {
  color: #FFF;
  font-size: 2.3em;
}
#green-grid-right-description {
  color: #FFF;
  font-size: 2.3em;
}

<div class="green">
  <div id="green-grid-left-description">Website problems?
    <br>We handle everything for you.</div>

  <div id="green-grid-right-description">Website problems?
    <br>We handle everything for you.</div>

</div>

Child div 没有回应 parent 的亲戚属性

Child div not responding to parent's relative property

html

css

position

Child div 没有回应 parent 的亲戚 属性

Child div not responding to parent's relative property

html

css

position

Child div 没有回应 parent 的亲戚属性