I am unable to center a div both horizontally and vertically

Question

I used Flexbox on my div but it still only centers horizontally and not vertically. I want it in the middle of the screen. Here is my code -:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        .box{
            background-color: red;
            border: 2px solid black;
            width: 100px;
            height: 100px;
            }
        .container{
            display: flex;
            justify-content: center;
            align-items: center;
        }   
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box1</div>
    </div>
</body>
</html>

Here is my output -:

Any help would be great.

Thank You.

Because you don't have vertical spacing for the body – Rajendran Nadar Sep 06 '22 at 03:54 — Rajendran Nadar, Sep 06 '22 at 03:54

score 2 · Accepted Answer · answered Sep 06 '22 at 03:53

2

set the height and width of the container to 100vh and 100vw

answered Sep 06 '22 at 03:53

M NARESH

142
1
7

score 0 · Answer 2 · answered Sep 06 '22 at 04:23

0

add height in your parent .container class it will take full height

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

answered Sep 06 '22 at 04:23

Ashish radadiya

97
3

score 0 · Answer 3 · answered Sep 06 '22 at 06:52

 .box{
    width: 50px;
    height: 50px;
    background-color: red;
    /* Center vertically and horizontally */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
 }
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
        <div class="box">Box1</div>
</div>

I am unable to center a div both horizontally and vertically

3 Answers3