-1

I have just started learning CSS, I ran into this problem. Please excuse me if its too silly to ask.

I want to center a DIV inside the body tag. I tired to use flexbox for this but somehow its coming in the center of the screen.

Here is the code.

 <html lang="en">
    <body>
    <style type="text/css">
    
        body
        {
            background: #6CB3A9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main
        {
            width:300px;
            height:300px;
            background:white;
        }
    
    </style>
        <div class="main">
            <div class="white-bottom"></div>
            <div class="red-top"></div>
            <div class="yellow-center"></div>
        </div>
    </body>
    </html>
saurabh-ar
  • 381
  • 1
  • 4
  • 17
  • 1
    It's already centered! if you wanna see it in the middle of the screen vertically you have to give your body a specific height `height: 100vh;` in body style – Omar Zaoujal Dec 14 '22 at 14:47

1 Answers1

-1

No need for align-items: center; if you're using display: flex;:

Note: I set a height for the body to demonstrate that it sits horizontally in the center of the body tag.

 <html lang="en">
    <body>
    <style type="text/css">
    
        body
        {
            background: #6CB3A9;
            display: flex;
            justify-content: center;
            // align-items: center;
            height: 500px;
            border: 1px solid grey
        }
        .main
        {
            width:300px;
            height:300px;
            background:white;
        }
    
    </style>
        <div class="main">
            <div class="white-bottom"></div>
            <div class="red-top"></div>
            <div class="yellow-center"></div>
        </div>
    </body>
    </html>
Harrison
  • 1,654
  • 6
  • 11
  • 19
  • If this does not satisfy your question, could I/we get a little more clarification on what is needed – Harrison Dec 14 '22 at 20:38