Ребенок не отвечает на относительное свойство родителя

Question

Я пытаюсь создать два подразделения. В основном два 50% divs рядом друг с другом. Я пытаю центрирование дивы вертикально, и я обычно использую этот блок кода, чтобы центрировать вещи по вертикали/горизонтали:

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

Однако, в данном случае, кажется, что мой ребенок DIVS green-grid-left и green-grid-right не реагируют на position: relative от green.

Может ли кто-нибудь сказать мне, почему мои два divs не совпадают в середине каждого из их 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>