align h tag и div в том же охватывающем div на том же горизонтальном уровне

Question

У меня есть тег H6 и еще один div, содержащий кнопку, разделяющую ту же строку (div). Мне нужен тег h6 для ввода, как по вертикали, так и по горизонтали, поэтому я использую на нем margin:auto, и он отлично работает. Я хочу, чтобы div, содержащий кнопку, был 20px слева от экрана, но на том же уровне центрированного тега h6; я хочу, чтобы он тоже входил в вертикаль. Ive использовал на нем следующие данные: position:absolute и margin:auto 0;, но он не работает. Кнопка отображается в левом верхнем углу закрывающего div (запустите мой фрагмент). Есть идеи?

left: 20px; 
zoom: 0; 
position: absolute; 
margin:auto 0; 

.container { align-items: center; 
 
width: 100%; 
 
max-width: 100%; 
 
height: 400px} 
 
.top { display: flex; 
 
flex-wrap: wrap; 
 
justify-content: center; 
 
width: 100%; 
 
height: 80%; 
 
margin: 0 auto; background: #f6f6f6;} 
 
.bottom { display: flex; 
 
flex-wrap: wrap; 
 
justify-content: center; 
 
width: 100%; 
 
height: 20%; 
 
margin: 0 auto; background: green;} 
 
h6 { margin: auto; } 
 
.back-button-block { background: none; 
 
display: block !important; 
 
left: 20px; 
 
zoom: 0; 
 
position: absolute; 
 
    margin:auto 0; 
 
}

<div class="container"> 
 
    <div class="top">Hello</div> 
 
    <div class="bottom"> 
 
    <div class="back-button-block">THIS</div> 
 
    <h6>hi</h6></div> 
 
</div>

Answer 1

Дополнительный CSS (остальные, как это, просто добавить их к селекторов):

.bottom { 
    position: relative; 
} 
.back-button-block { 
    top: 50%; 
    transform: translateY(-50%); 
}