将某些 div 元素居中，同时将另一个元素保持在底部答案

【问题标题】：Centering certain div elements while keeping another element at the bottom将某些 div 元素居中，同时将另一个元素保持在底部
【发布时间】：2021-11-10 01:49:34
【问题描述】：

我在一个 div 中有三个元素，它本身在另一个 div 中。我希望内部 div 的前两个元素相对于最外层 div 居中并相互堆叠，而第三个元素也应该相对于最外层 div 位于底部。这是一个 WordPress 项目，我是新手，所以我不想更改任何 div 或类结构，只需设置现有类的样式即可。我更喜欢仅使用 Flexbox 的解决方案。

这是html：

<div class="outerDiv">
    <div class="innerDiv">
        <p class="e1"> Centered element 1 </p>
        <p class="e2"> Centered element 2 </p>
        <p> Bottom element </p>
    </div>
</div>

这是相关的 CSS：

.outerDiv{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 90px 0 0 0;
    box-sizing: border-box;
}

.innerDiv {
    align-self: center;
    margin: 30px 30px 30px 30px;
}

.e1 {
  margin: 10px 0;
}

.e2{
   margin: 10px 0;
}

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

欢迎来到 Stackoverflow。我已对此进行了更新以满足您的新要求：

        .outerDiv {
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.innerDiv {
    width: 50%;
    height: 100%;
}

.e1 {
    width: 100%;
    height: 25%;
}

.e2 {
    width: 100%;
    height: 25%;
}

.e3 {
    width: 50%;
    height: 25%;
    position: absolute;
    bottom: 0;
}

【讨论】：

这是迄今为止最接近的解决方案，但我将前两个元素彼此内联，而不是堆叠在一起（我应该澄清一下，我会在我的问题中编辑它） .然而更重要的是，垂直对齐让我将前两个元素放在顶部，第三个元素放在中间。我正在寻找前两个垂直居中，第三个元素在底部。

【解决方案2】：

.innerDiv {
  /*...*/
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.e1 {
  margin: 10px 0;
  margin-top: auto;
}

.e2{
   margin: 10px 0;
   margin-bottom: auto;
}

编辑：为.innerDiv添加了宽度/高度属性

【讨论】：