html - 子 div 不响应父的相对属性

Question

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

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

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

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

.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

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