在绝对定位的元素上使用 Flex 属性 align-self - 在 IE11 中不起作用答案

【问题标题】：Using the Flex propety align-self on an absolute positioned element - not working in IE11在绝对定位的元素上使用 Flex 属性 align-self - 在 IE11 中不起作用
【发布时间】：2017-09-22 00:01:33
【问题描述】：

我正在尝试使用 align-self 将 .before-text 水平居中。它在 Chrome 和 Firefox 中运行良好，但在 IE 中当然不行。

https://jsfiddle.net/jjcnoh6b/2/

堆栈sn-p

.box {
  background-color: tomato;
  padding: 20px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.before-text {
  position: absolute;
  top: 15px;
  font-size: 11px;
  align-self: center;
}

<div class="box">

  <div class="before-text">Pre-Header Text</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ratione accusantium, porro consequatur, velit praesentium laboriosam, fuga sapiente sequi neque recusandae officia. Consequuntur temporibus fugit deserunt cupiditate libero blanditiis
    veritatis.
  </p>

</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

不，不是，您需要 transform: translate 才能在 IE（和 Safari）中使用它

主要原因是规格。已更改，到目前为止只有 Chrome/Firefox/Edge 赶上了，好消息是，这项工作跨浏览器。

Updated fiddle

堆栈sn-p

.box {
  position: relative;
  background-color: tomato;
  padding: 20px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.before-text {
   position: absolute;
   top: 15px;
   font-size: 11px;
   left: 50%;
   transform: translateX(-50%);
}

<div class="box">

  <div class="before-text">Pre-Header Text</div>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ratione accusantium, porro consequatur, velit praesentium laboriosam, fuga sapiente sequi neque recusandae officia. Consequuntur temporibus fugit deserunt cupiditate libero blanditiis veritatis.</p>
  
</div>

【讨论】：