html - 将 h 标签和 div 在同一封闭 div 中的同一水平水平对齐

Question

我有一个 H6 标签和另一个包含共享同一行 (div) 的按钮的 div。我需要在垂直和水平方向上输入 h6 标签，所以我在上面使用了 margin:auto，效果很好。我希望包含按钮的 div 距屏幕左侧 20px，但与居中的 h6 标签处于同一水平；即我也希望它垂直输入。我在 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%);
}