Задать вопрос
opposite
@opposite
свободный художник
html

Размещение текста по центру экрана

Друзья, подскажите наиболее кросс-браузерное решение по размещению текста на странице по центру окна браузера (на всякий случай, поясню: это когда отступы сверху, снизу, слева и справа от границ окна до текста попарно одинаковые). Заранее, спасибо!
  • Вопрос задан
  • 65147 просмотров
Комментировать
Подписаться 14 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 7
kyrie
@kyrie
В общем случае решения нет, зато есть куча частностей.

Если текст в одну строку и есть возможность использовать абсолют (что далеко не всегда)то —
position:absolute;
width:100%;
top:50%;
text-align:center;

Если известна высота блока и можно использовать абсолют, то вариант предложенный выше.

Если нельзя использовать абсолют, но известна высота блока и текст в одну стоку — то через line-height равный высоте блока.

Ну и 100% кроссбраузерная классика о которой вечно все забывают — зафигачить таблицей с одной ячейкой.
Ответ написан
1 комментарий
1 комментарий
Sk8er
@Sk8er
Жесток, опасен, вспыльчив. Щеголь.
Куча вариантов выше с уймой кода, а можно всё сделать буквально парой строчек в CSS, с помощью Flexbox. Так, например: blog.sk8er.name/rabota/vyravnivanie-bloka-po-centru
Ответ написан
Комментировать
Комментировать
@ssbxlan 
#center {
	top: 50%; /* Отступ в процентах от верхнего края окна */
	left: 50%; /* Отступ в процентах от левого края окна */
	width: 450px; /* Ширина блока */
	height: 450px; /* Высота блока */
	position: absolute; /* Абсолютное позиционирование блока */
	margin-top: -225px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
	margin-left: -225px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
}
Первым результатом гуглится такой вариант, я его всегда использовал
Ответ написан
1 комментарий
1 комментарий
@Softlink
td {
text-align: center;
vertical-align: middle;
}
Ответ написан
4 комментария
4 комментария
@vasea_sd
Чем этот код хуже

Position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
Ответ написан
Комментировать
Комментировать
@aleksandy 
<html>
    <head>
        <style type="text/css">
            html, body {
                height : 100%;
                width : 100%;
                overflow : hidden;
            }
            .wrapper {
                height : 100%;
                width : 100%;
                padding: 20px;
            }
            .content {
                height : 100%;
                width : 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="content">Content here</div>
        </div>
    </body>
</html>
Ответ написан
1 комментарий
1 комментарий
Zakonoposlushniy
@Zakonoposlushniy
Спасибо за варианты.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Ещё заказы