how to center text vertically in html using css only

2018-06-14 15:27:07

i have a very simple html. due to some limitations, i cannot modify the html content. I want to center the text vertically only using css.

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

Note that the size of the html can be variable.

In additional, if the text cannot be displayed in one line, it should be broken into multiple lines.

Is it possible?

I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.

There are some workarounds, see http://phrogz.net/css/vertical-align/index.html

另一个可能的解

<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>

<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>

链接地址: http://www.djcxy.com/p/41642.html

上一篇: CSS垂直和水平中心Div

下一篇: 如何在html中使用CSS来垂直居中文本