как отцентрировать абсолютно позиционированный элемент [h4]?

Question

Я хочу центрировать абсолютно позиционированный тег [h4]. Значение заголовка [h4] извлекается из базы данных, и каждый раз оно будет иметь другое значение.

Я пробовал материал ниже.

h4 {позиция: абсолютная; верх: 20px; слева: 42%;}

Работает, когда заголовок h4 содержит около 15 символов. Но это не работает, если заголовок h4 содержит меньше символов или больше 18 символов. Я имею в виду, это работает только для определенного сценария. Есть ли гибкое решение?

Answer 1

Попробуйте с left: 50%; и transform: translate(-50%, -50%);

https://stackoverflow.com/a/25776315/11401246 для хорошего объяснения того, что именно он делает.

Answer 2

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

Без использования свойства position вы можете центрировать элементы с помощью display flex.