絶対配置された要素にFlex propety align-selfを使用する - IE11では機能しない

Question

align-selfを使用して.beforeテキストを水平方向に中央に配置しようとしています。 ChromeやFirefoxでは正常に動作しますが、もちろんIEでは動作しません。

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

スタックは、メインいいえ、それは、あなたがIE（とSafari）でその作業をするためにtransform: translateを必要としない

を

.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>

Answer 1

スニペット理由は仕様です。変更され、これまでのところChrome/Firefox/Edgeだけがキャッチアップしており、良いニュースは、このクロスブラウザです。

Updated fiddle

スタックは

.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>

スニペット