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

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

Друзья, подскажите наиболее кросс-браузерное решение по размещению текста на странице по центру окна браузера (на всякий случай, поясню: это когда отступы сверху, снизу, слева и справа от границ окна до текста попарно одинаковые). Заранее, спасибо!
  • Вопрос задан
  • 66427 просмотров
Комментировать
Подписаться 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
Спасибо за варианты.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Допил JS-PHP парсера
22 дек. 2024, в 16:26
2500 руб./за проект
Прогнозирование поломок с помощью модели ARIMA на имеющемся датасете
22 дек. 2024, в 15:29
2000 руб./за проект
Разработать Extension для Google Chrome Webstore
22 дек. 2024, в 14:07
15000 руб./за проект
Ещё заказы