中央揃ったdiv内のワードラップが機能しません

Question

特定のクラスのdivでワードラップが機能しません。私はこのクラスを追加すると

<div class="back" style="width: 100px; height: 100px; background-color: red;"> 
    <h4>Konsequentialismus</h4> 
</div> 

しかし、できるだけ早く、ワードラップが動作を停止：私のバイオリンチェック

：それが必要として、通常のdiv要素でhttps://jsfiddle.net/d7zjt408/1/

は、ワードラップの作品

最初のdivと同じように、2番目のdivの「Konsequentialismus」という単語は壊れていません。誰でも助けてくれますか？

Answer 1

あなたはあなたの言葉は私にとって第二のdivで壊れ結構ですフレックス

.centered h4{ 
    text-align:center; 
position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); } 

h4 { 
 
    word-wrap: break-word; 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    -o-hyphens: auto; 
 
    hyphens: auto; 
 
    text-align: left; 
 
} 
 

 
.centered h4{ 
 
    text-align:center; 
 
position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); }

<div class="back" style="width: 100px; height: 100px; background-color: red;"> 
 
    <h4>Konsequentialismus</h4> 
 
</div> 
 
<br> 
 

 
<div class="back centered" style="width: 100px; height: 100px; background-color: red;"> 
 
    <h4>Konsequentialismus</h4> 
 
</div>