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

Posted 2023-03-05

【中文标题】将某些 div 元素居中，同时将另一个元素保持在底部

【英文标题】：Centering certain div elements while keeping another element at the bottom

【发布时间】：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;

【参考方案1】：

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

        .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添加了宽度/高度属性