5. Центрування тексту за допомогою властивості Transform
- Установіть для батьківського контейнера значення position: relative. …
- Встановіть для дочірнього елемента позицію: абсолютна. …
- Встановіть властивості top і left для дочірнього елемента на 50%. …
- Використовуйте transform: translate(-50%, -50%), щоб відцентрувати дочірній елемент як горизонтально, так і вертикально.
Щоб відцентрувати текст у CSS, скористайтеся властивістю вирівнювання тексту та визначте її за допомогою значення "center". Ви можете використовувати цю техніку всередині блокових елементів, таких як div. Ви також можете центрувати текст у HTML, що корисно, якщо ви хочете центрувати лише окремі елементи на сторінці в кожному окремому випадку.
Для вертикального центрування тексту в елементі div використовуйте line-height: 200px; відповідати його висоті, тоді як вертикальне вирівнювання: посередині; на вкладеному проміжку забезпечує точне вирівнювання незалежно від розміру шрифту. Вирівнювання тексту: по центру; властивість горизонтально центрує текст, а пунктирна межа забезпечує візуальне розрізнення.
Виберіть «Об’єкт» > «Параметри текстового кадру». У розділі «Вертикальне вирівнювання» діалогового вікна «Параметри текстового кадру» виберіть «Вгорі/праворуч», «По центру», «Внизу/ліворуч» або «Вирівняти по ширині»..
- встановити div – position:relative.
- а потім установіть абзац – position:absolute ,top:50%, left50%,
- transform:translate(-50% , -50%) – встановити центр по вертикалі та горизонталі.
- transform:translateY(-50%) – встановити вертикально по центру.
- transform:translateX(-50%) – встановити горизонтально по центру.
- Працює на 100%