Unable to vertically align this div with flexbox-CodePudding

The Age old question ...and yes - there's 50 BILLION ones online already - So I've followed every tutorial on it I could find. But no matter what I do, even when I simplify it down to the most basic thing ever, I just can't center vertically, it only centers horizontally at most.

Does the issue have to do with my code? Or is it only me (as in something to do with how I'm previewing it?). It's probably just a stupid mistake but I don't know what it is...

(Below is the code I used for it. Super duper basic literally just a box.)

body {  
background-color: gray;
}

.holder { 
  display: flex;
  align-items: center;
}

.box {
  background-color: brown;
  width: 100px;
  height: 100px;
  border: 3px solid white
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    
    <!-- Title of the website.  -->
    <title>Under construction</title>
    
    <!-- Below is the link to source my own css. -->
    <link rel="stylesheet" href="mycool.css">

    <!-- The viewport. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

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

</body>

</html>

Screenshots of when I'm trying to preview it (both in VS Code and just straight up opening the file in my browser) VS Code Preview Opening it in Firefox

My end goal is to center it vertically and horizontally but it... just won't even center vertically on it's own

CodePudding user response：

I dont't understand your question... the holder have no height specified so how would you center vertcally a box in it???

Just tell me if this is you want to do so I can remove my answer if this is a misunderstanding.

body {  
    background-color: gray;
    }

    .holder { 
      display: flex;
      align-items: center;
      justify-content:center;
      border: 1px solid white;
      height: 300px;
    }

    .box {
      display: flex;
      align-items: center;
      justify-content:center;
      background-color: brown;
      width: 100px;
      height: 100px;
      border: 3px solid white
    }
    .text{
      color:#ffffff;    
    }

<div >
        <div >
            <div >
                text here
            </div>
        </div>
</div>