Существует несколько способов разместить текст в блоке по центру с помощью CSS. Рассмотрим несколько наиболее распространенных вариантов:
- Используя свойство
text-align: center;для блока, содержащего текст:
<div class="container">
<p class="centered-text">Текст по центру</p>
</div>
<style>
.container {
text-align: center;
}
.centered-text {
display: inline-block;
}
</style>
Здесь мы устанавливаем свойство text-align: center; для блока .container, содержащего текст, и задаем класс .centered-text для элемента, который должен быть выровнен по центру. Также устанавливаем для этого элемента свойство display: inline-block;, чтобы он занимал только необходимое количество места на странице.
- Используя свойство
line-heightв сочетании сheight, чтобы текст помещался по центру блока:
<div class="container">
<p class="centered-text">Текст по центру</p>
</div>
<style>
.container {
height: 300px;
text-align: center;
}
.centered-text {
height: 100%;
line-height: 300px;
}
</style>
Здесь мы задаем высоту блока .container, а затем устанавливаем высоту и line-height для элемента .centered-text, чтобы текст выравнивался по центру блока. Значение line-height должно быть равно высоте блока.
- Используя свойство
display: flex;в сочетании сalign-itemsиjustify-content:
<div class="container">
<p class="centered-text">Текст по центру</p>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.centered-text {
text-align: center;
}
</style>
Здесь мы устанавливаем свойство display: flex; для блока .container и используем align-items: center; и justify-content: center;, чтобы выравнять содержимое блока по центру. Высоту блока задаем по желанию, а затем используем text-align: center; для элемента .centered-text, чтобы центрировать текст внутри блока.
Выбор способа зависит от особенностей вашей страницы и задачи. Поэтому можете выбирать то, что лучше всего подойдет.





