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的{{1}}。

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

green

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

Answer 1

您不必将元素置于绝对位置。将它们相对放置并仅垂直对齐它们。您实际上并不希望它们水平居中。使用保证金 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 2

如果您将top属性的绝对位置设置为50％并将translate X属性设置为-50％，则您的元素将位于父级的X中心。因为它转换为子宽度的X-50％。如果你想要一个孩子在左边而另一个孩子在右边并且都垂直居中，你可以用绝对位置和翻译属性这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

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

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

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

默认情况下，位置不是继承，因此如果要继承，则需要设置它。检查w3Schools。

儿童div没有回应父母的相对财产

4 个答案: