Как центрировать текст по вертикали в html, используя только css

У меня очень простой html. из-за некоторых ограничений я не могу изменить содержимое html. Я хочу центрировать текст по вертикали только с помощью css.

<html>
<head>...</head>
<body>
<div>Ops, the webpage is currently not available</div>
</body>
</html>

Обратите внимание, что размер html может быть переменным.

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

Возможно ли это?

Ответ 1

Я думаю, что vertical-align работает только для контента, который находится в таблице. Для вашей простой страницы вы можете поместить содержимое в таблицу вместо div, чтобы избежать этой проблемы.

Есть некоторые обходные пути, см. http://phrogz.net/css/vertical-align/index.html

Ответ 2

Другое возможное решение:

<html>
<head>
    <title>Title</title>
    <style>
        body {height:100%}
    </style>
</head>
<body>
<div style="height:100%;">
    <div style="position:relative;top:50%;text-align:center">Ops, the webpage is currently not available</div>
</div>
</body>
</html>

Ответ 3

<html>
<head>...
   <style type="text/css">
    div{
        width: 300px;
        height: 300px;
        border: solid blue;
        display: table-cell;
        vertical-align: middle;
    }
   </style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>

Ответ 4

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.vertical {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
    }

</style>
</head>
<body>
<div class="vertical">
 Centered
</div>

</body>
</html>

Ответ 5

Для выравнивания содержимого div используйте следующие строки кода

<html>
<head>
</head>
<body>
<i>
    <div style="text-align:center;">
    Hello
    </div>
</i>
</body>
</html>

Ответ 6

Попробуйте следующее:

.text-tag{

    text-align:center;
    margin-top: 25%;
}

и примените "текст-тег" к тексту, который хотите центрировать.