居中的 div 内的自动换行不起作用

Question

我的自动换行在具有特定类的div中不起作用。

检查我的小提琴：https://jsfiddle.net/d7zjt408/1/

在普通的div 中，自动换行可以正常工作：

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

但是，一旦我添加这个类，自动换行就会停止工作：

.centered {
  display: flex;
  align-items: center;
  justify-content: center }

正如您在小提琴中看到的那样，在第二个div中，"Konsequentialismus"一词没有像第一个div那样被破坏。谁能帮我？

Answer 1

你也可以在没有flex的情况下使用它

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