opposite
@opposite
свободный художник

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

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

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

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

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

Ну и 100% кроссбраузерная классика о которой вечно все забывают — зафигачить таблицей с одной ячейкой.
Ответ написан
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; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
}
Первым результатом гуглится такой вариант, я его всегда использовал
Ответ написан
@Softlink
td {
text-align: center;
vertical-align: middle;
}
Ответ написан
@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>
Ответ написан
@vasea_sd
Чем этот код хуже

Position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы