CSS: Center text (horizontally and vertically)

<html>

<head>
    <meta charset="UTF-8">
    <title>404 Error Page</title>
    <style>
        .parent{
          width: 100%;
          height: 30%;
          margin-bottom: 50px;
          
          text-align: center; 
        }

        .text-parent:before {
          content: "";
          display: inline-block;
          height: 100%;
          vertical-align: middle;
        }        
    </style>
</head>

<body>
    <div class="parent text-parent">
        <h1> 404 </h1>
    <hr>
        <h3>此活動不存在</h3>
    </div>
</body>

</html>

<html>

<head>

<title>404 Error Page</title>

<style>

.parent{

width: 100%;

height: 30%;

margin-bottom: 50px;

text-align: center;

}

.text-parent:before {

content: "";

display: inline-block;

height: 100%;

vertical-align: middle;

}

</style>

</head>

<body>

<hr>

<h3>此活動不存在</h3>

</div>

</body>

</html>

Ref.: iThome: 29. CSS 水平置中/ 垂直置中的方法

This entry was posted in CSS, HTML. Bookmark the permalink.

CSS: Center text (horizontally and vertically)

Categories