CSS如何让绝对定位div相对于另一绝对定位div定位并实现子元素居中

问题原因 #

你当前的.bannerinner设置的bottom: 50%仅能让元素的底部对齐父元素的垂直中线，没有向上偏移自身高度的一半，无法实现垂直居中；left: 2vh的设置会让元素始终距离左侧有2vh的间距，无法实现水平居中；同时vertical-align: middle仅对行内元素、表格单元格元素生效，对绝对定位元素没有作用。

解决方案 #

方案1：基于现有绝对定位逻辑修改 #

不需要调整父元素.banner的原有属性，仅修改.bannerinner的CSS即可：

完全居中（水平+垂直都居中）

.bannerinner {
   padding: 0;
   margin: 0;
   position: absolute;
   left: 50%;
   top: 50%;
   /* 向左、向上偏移自身宽高的一半，抵消定位的偏差 */
   transform: translate(-50%, -50%);
}

仅垂直居中、左侧保留2vh间距

如果你的需求是不需要水平居中，只垂直对齐，保留原有左侧边距，可调整为：

.bannerinner {
   padding: 0;
   margin: 0;
   left: 2vh;
   position: absolute;
   top: 50%;
   /* 仅向上偏移自身高度的一半 */
   transform: translateY(-50%);
}

方案2：使用Flex布局（更推荐） #

Flex是目前CSS布局的主流方案，写法更简洁可维护性更高，不需要给子元素设置绝对定位：
首先修改.banner的CSS，新增Flex相关属性：

.banner {
   background-color: rgba(209, 29, 155, 0.212);
   padding: 8px 15px;
   overflow: hidden;
   height: 10vh;
   width: 150vh;
   max-height: 10vh;
   min-height: 10vh;
   position: absolute;
   bottom: 9vh;
   /* 新增以下属性 */
   display: flex;
   /* 水平居中，若要左对齐则改为flex-start */
   justify-content: center;
   /* 垂直居中 */
   align-items: center;
}

然后简化.bannerinner的CSS，删除所有定位相关属性即可：

.bannerinner {
   padding: 0;
   margin: 0;
   /* 如果需要保留左侧2vh边距，新增margin-left: 2vh即可 */
}

注意事项 #

• 方案1的transform属性兼容IE9及以上版本，绝大多数业务场景都可以正常使用
• 方案2的Flex布局兼容IE10及以上版本，适配现在所有主流浏览器，更推荐使用

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