子div无法回应父母的相关属性

Question

我正在尝试创建两个部门。基本上两个50％divs彼此相邻。我试图垂直居中的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％块中间没有对齐吗？

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

<div class="green"> 
 
\t \t <div id="green-grid-left"> 
 
\t \t \t <div id="green-grid-left-description">Website problems?<br> 
 
\t \t \t We handle everything for you.</div> 
 
\t \t </div> 
 
\t \t <div id="green-grid-right"> 
 
\t \t \t <div id="green-grid-right-description">Website problems?<br> 
 
\t \t \t We handle everything for you.</div> 
 
\t \t </div> 
 
\t </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>

Answer 2

您已经为其定义的位置，所以他们会带你定义的位置（绝对），而忽略了一个从它的父。如果你希望他们能够继承其父你需要他们的位置设置为inherit喜欢的位置：

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

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

位置默认情况下不继承，所以你需要设置它，如果你想继承。检查w3Schools。

Answer 3

您不必绝对定位元素。将它们放置在相对位置，只将它们对齐。你实际上不希望它们被水平居中。使用保证金为 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 4

如果设置一个顶级物业的绝对位置，以50％和X属性转化为-50％ ，你的元素将在你父母的X中心。因为它翻译X-50％的儿童宽度。如果你想在左边的一个孩子，另一个在右侧，既可以垂直居中，你可以用绝对位置做这种方式和翻译属性：

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