Vertically middle and doctype

[joon1]

The text “centerBox” at http://dot.kr/x-test/html/middleCenter/index.php is vertically middle aligned.

The page above has not declared “!DOCTYPE HTML”.

Since I like to delcare the DOCTYPE,
I did it at the page below
The page below doesn’t aligned the text “centerBox” vertically middle because it has “!DOCTYPE HTML”.

http://dot.kr/x-test/html/middleCenter/index2.php

The code in index.php and the code in index2.php are all same but the code in index.php has no “DOCTYPE” while the code in index2.php has it.

How can I make the text “centerBox” vertically middle with “!DOCTYPE HTML”?

[ralphm]

An easy way these days is to use something like display: flex:

<div class="container">
  <p>centerbox</p>
</div>

.container {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

[PaulOB]

@joon1

How can I make the text “centerBox” vertically middle with “!DOCTYPE HTML”?

Add this:

html,body{margin:0;padding:0;height:100%;}

Or do what Ralph says if only modern browser support is required.