auto margin is not working in top and bottom in css

Question

auto margin in not working in top and bottom..... my goal is to make body float in middle with equal margin in top and bottom side....... my expected result is to same height of top and bottom margin........ but the result is body shifted to top side

html {
    width: 100vw;
    height: 100vh;
    background-color: red;
    margin: 0px;
    padding: 0px;
}
body {
  background-color: chartreuse;
  width: 90%;
  height: 90%;
  padding: 0px;
  margin: auto;
  border-color: black;
  border-width: 10px;
  border-style: solid;
}

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Document</title>
</head>
<body>
</body>
</html>

screenshot of page

You should use a `div` inside the `body` instead of trying to float the entire `body`. Also, for `margin: auto` to work you need to set the 'floating' element to `display: block` — Daniel_Knights, Jun 18 '20 at 07:22

score 3 · Answer 1 · answered Jun 18 '20 at 07:28

If both margin-top and margin-bottom are auto, value used for both of them is zero. That's why the box is not vertically centered.

You can use flexbox to center the box horizontally and vertically using following propertieson the parent element of the element that you want to be centered both horizontally and vertically.

display: flex;
align-items: center;
justify-content: center;

Example:

body {
  margin: 0;
}

div {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.centered {
  background: blue;
  width: 100px;
  height: 100px;
}

<div>
  <div class="centered"></div>
</div>

Upvoting this also. @Yousaf – Avinash Dalvi Jun 18 '20 at 07:41 — Avinash Dalvi, Jun 18 '20 at 07:41

score 2 · Accepted Answer · answered Jun 18 '20 at 07:41

Apparently, this code did the job for me.

html {
  width: 100vw;
  height: 100vh;
  background-color: red;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: chartreuse;
  width: 90%;
  height: 90%;
  padding: 0px;
  margin: 40px 40px;
  border-color: black;
  border-width: 10px;
  border-style: solid;
}

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

<head>

  <title>Document</title>
</head>

<body>
</body>

</html>

score 1 · Answer 3 · answered Jun 18 '20 at 07:24

1

Instead of using padding: 0px, use padding-top: 5px and padding-bottom:5px. If the range of your bottom page and top page, they will have the same spaces.

answered Jun 18 '20 at 07:24

Hiraeths

380
3
16

1

5px top and bottom won't make this float in the middle of the screen. – Unbranded Manchester Jun 18 '20 at 07:35

score 1 · Answer 4 · answered Jun 18 '20 at 07:29

There is no such thing as margin:auto for top and bottom equal spacing. You can normally use a combination of display: table on the parent and display:table-cell; on the child with vertical-align:middle if you don't want to use flex.

However, in your scenario where you are trying to do this on body, it won't work. So, instead, seeing as you've chosen to go with a height of 90%, you can set margin top and bottom to be 5%.

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

      <head>
        <style>
          html {
            width: 100vw;
            height: 100vh;
            background-color: red;
            margin: 0px;
            padding: 0px;
          }

          body {
            background-color: chartreuse;
            width: 90%;
            height: 90%;
            padding: 0px;
            margin: 5% auto;
            border-color: black;
            border-width: 10px;
            vertical-align: middle;
            border-style: solid;
          }

        </style>
        <title>Document</title>
      </head>

      <body>
      </body>

    </html>

Yes this one approach is working. Upvoting your answer @unbranded-manchester — Avinash Dalvi, Jun 18 '20 at 07:40
your approach makes page height greater than 100%. Upvoting your answer @unbranded-machester — iamaksingh11, Jun 18 '20 at 07:46

Avinash Dalvi · Answer 5 · 2020-06-18T08:03:03.113

Like said in comment you have to use div instead of body. Body doesn't float basis on height and width or margin.

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html {
                width: 100vw;
                height: 100vh;
                background-color: red;
                margin: 0px;
                padding: 0px;
            }
            .container {
                background-color: chartreuse;
                width: 90%;
                height:90%;
                padding: 0px;
                margin: auto;
                border-color: black;
                border-width: 10px;
                border-style: solid;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
    <div class="container"></div>
    </body>
    </html>

specify the value of height, like 90% to check the result @aviboy2006 — iamaksingh11, Jun 18 '20 at 08:01

auto margin is not working in top and bottom in css

5 Answers5