Элементы позиции относительно родителя родителя

Question

Возможно ли разместить элементы, относящиеся к родителям родителей?

<div id='div1'> 
    <div id='div2'> 
     <input type='button' class='btn'> button 2</button> 
     <input type='button' class='btn'>button 3</button> 
     <input type='button' class='btn'>button 1</button> 
    </div> 
</div> 

CSS-код хотел, чтобы расположить кнопки относительно первого DIV в центре по вертикали CSS-я попытался

.btn{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%) 
    } 

, но это будет центрировать его по отношению ко второму дел. Возможно, это отличается от размера родительского div?

Answer 1

фотография скрипка https://jsfiddle.net/3531chbz/1/

Хитрость заключается в том, вы не должны дать position: атрибута второго ДИВ т.е. #div2, так что в этом случае ребенок в течение второго DIV будет занять позицию от своего великого родителя,

также положение ввода должен быть изменен на position:absolute

HTML

<div id='div1'> 
    <div id='div2'> 
     <button class='btn'> button 2</button> 
     <button class='btn'>button 3</button> 
     <button class='btn'>button 1</button> 
    </div> 
</div> 

CSS

#div1 { 
    position:relative; 
    background-color:green; 
    height:400px 
} 
#div2 { 
    background-color:blue; 
    height:200px; 
    text-align:center; 
} 
.btn { 
    position:absolute; 
    top: 50%; 
    transform: translateY(-50%) 
} 

Answer 2

Просто центрирования div2, который обернут вокруг кнопок.

Примечание: Это <input type='button' class='btn'> button 2</button> не является действительным HTML

#div1 { 
 
    height: 250px; 
 
    position: relative; 
 
    background: lightgreen; 
 
} 
 
#div2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: red; 
 
}

<div id='div1'> 
 
    <div id='div2'> 
 
    <button class="btn">button 2</button> 
 
    <button class="btn">button 3</button> 
 
    <button class="btn">button 1</button> 
 
    </div> 
 
</div>