hタグを整列し、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%); 
}