Centering vertically a Div element inside the body only with margins and padding-CodePudding

I'm in a course where I should complete a challenge only using padding and margin

the current challenge is to center a div element with a border that is inside the body with the width: 200px and padding: 50px inside to make it easier to see and look (padding is not necessary)

I used this code to center it horizontally but for vertically I have no idea

div {
  width: 200px;
  border: 4px solid black;
  padding: 50px;
  margin: auto;
}

<body>
  <div></div>
</body>

Help me center it vertically as well but no flex box and position & transform

CodePudding user response：

You can use CSS calc - this snippet assumes that the body is 100vh height in the absence of further information.

You can work out what space is not being taken up by the div and the halve it and use it to calculate a top margin. The space taken up is 2*border width 2 * padding

div {
  width: 200px;
  border: 4px solid black;
  padding: 50px;
  margin: auto;
  margin-top: calc( (100vh - 100px - 8px) / 2);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset="UTF-8" />
  <title>challenge 2</title>
</head>

<body>
  <div></div>
</body>

</html>

CodePudding user response：

 div {
        width: 200px;
        border: 4px solid black;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
              
    
}