Как выровнять по центру переполняющий элемент в CSS

Question

У меня есть коробка с text-align: center, с max-width: 420px.Внутри коробки есть h1 с очень длинным словом.(См. Пример кода)

Проблема: Переполняющееся слово теперь выровнено по левому краю.Я знаю, что для этого есть word-wrap, но я не хочу вырезать текст, он должен быть на одной строке.Ширина поля также фиксирована и не может быть больше.

Мой вопрос: Можно ли выровнять по центру большое переполняющееся слово?

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Answer 1

Самый простой способ сделать это - добавить отрицательное левое и правое поле к заголовку.Это не идеально, потому что это может испортить ваш другой контент, а также может не работать с очень длинными словами:

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 -10% 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(0,0,0,0.2)
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>

Другим решением является перенос слов внутри контейнера.Поддержка браузеров очень хорошая: https://caniuse.com/#feat=css-hyphens

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(0,0,0,0.2);
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<div class="titles">
  <h1 lang="de">Allgemeine Geschäftsbedingungen</h1>
</div>

Answer 2

^{Я отвечу на это сейчас, но я думаю, что это может быть дубликатом.Если он найден, я удалю ответ.}

Это можно сделать, превратив элемент <h1> в гибкий элемент и указав на нем justify-content: center;.

.titles {
  text-align: center;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 420px;
  background: lightgrey;
}

h1 {
  font-size: 2.9rem;
  margin: 0 0 1.9rem;
  color: #3d78c7;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

<div class="titles">
  <h1>Allgemeine Geschäftsbedingungen</h1>
</div>