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

Question

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

查看我的fiddle：https://jsfiddle.net/d7zjt408/1/

在正常 div 中，自动换行会正常工作：

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

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

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

正如您在 fiddle 中看到的那样，在第二个 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>

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

Word-wrap inside a centered div does not work

css

word-wrap