Bootstrap 4在IE11中.row用align-self-center丢宽且垂直居中失效

嘿，刚好之前踩过IE11 Flexbox兼容的坑，来给你捋捋解决方案：

一、.row垂直居中未生效的问题 #

IE11对Flexbox的支持存在不少细节偏差，尤其是垂直居中的实现。要让.row在父容器中沿Y轴垂直居中，你需要注意这几点：

1. 给父容器设置明确的高度和Flex布局
   父容器必须有可计算的高度（比如min-height: 100vh用于全屏居中，或者固定高度），同时完整设置Flex相关属性，还要加上IE11兼容的前缀：

   .vertical-center-container {
     display: flex;
     -ms-display: flex; /* IE11 兼容前缀 */
     flex-direction: column;
     -ms-flex-direction: column;
     justify-content: center;
     -ms-justify-content: center;
     min-height: 100vh; /* 根据你的需求调整高度 */
   }
   

   这里用justify-content: center而不是align-items，是因为当父容器是纵向flex布局时，Y轴的居中靠justify-content控制，IE11对这个属性的支持更稳定。

2. 避免Bootstrap默认样式干扰
   Bootstrap的.row默认带有负margin，如果你是直接在.row外层做居中，可能需要给.row的直接父容器加上.container或.container-fluid，或者手动抵消负margin的影响，否则布局偏移可能导致居中效果看起来失效。

二、使用align-self-center的.row宽度丢失问题 #

这个问题也是IE11的Flexbox特性导致的：当你给flex子元素设置align-self: center时，IE11会默认让元素收缩到内容宽度，而忽略.row原本的width: 100%设置。解决方法很简单，给这个.row显式声明宽度或者flex属性：

.row.align-self-center {
  width: 100%;
  /* 或者用flex属性强制占满宽度，更符合Flex布局逻辑 */
  flex: 0 0 100%;
  -ms-flex: 0 0 100%; /* IE11 兼容前缀 */
}

这样就能强制.row保持父容器的100%宽度，同时保留align-self-center的垂直居中效果。

总结一下 #

• 垂直居中的核心是父容器要有明确高度+正确的Flex属性配置，适配IE11的前缀不能少
• 宽度丢失的问题通过给.row添加显式的宽度或flex属性就能解决

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