WordPress项目中用Flexbox实现两元素居中、另一元素固定底部（不改DOM结构）

以下是仅使用Flexbox、无需修改现有HTML结构的实现方案，只需在现有CSS基础上追加如下样式即可：

/* 调整innerDiv布局，占满外层容器可用空间，改为纵向Flex布局 */
.innerDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* 第一个居中元素上方自动填充剩余空间，推动前两个元素整体处于居中位置 */
.e1 {
  margin-top: auto;
}

/* 底部元素上方自动填充剩余空间，推动自身固定在容器底部 */
.innerDiv p:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

效果说明 #

• innerDiv占满outerDiv的可用宽高，纵向排列所有子元素，默认水平居中所有内容
• 利用Flex布局中margin: auto自动分配剩余空间的特性：e1的上外边距自动填充上方空间，底部元素的上外边距自动填充中间剩余空间，最终实现前两个元素整体垂直水平居中、第三个元素固定在底部的效果
• 完全保留原有结构和类，无需修改HTML代码，适配WordPress场景

内容的提问来源于stack exchange，提问作者rmejialacayo