Margin 0 auto won't fully center a div

Question

I have code to center a div on an HTML page.
My problem is that margin: 0 auto only centers the div horizontal, but I want it fully centered, so also vertically.

body{
  background-position: center;
  background: #0a056f;
  background: -moz-linear-gradient(45deg, #0a056f 0%, #054fb5 100%);
  background: -webkit-linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  background: linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a056f', endColorstr='#054fb5', GradientType=1);
}

.login_register_recover_box{
  background-color: #fff;
  background-position: center;
  -moz-box-shadow:    0px 0px 50px 5px #091079;
  -webkit-box-shadow: 0px 0px 50px 5px #091079;
  box-shadow:         0px 0px 50px 5px #091079;
  width: 75%;
  margin: 0 auto;
  border-radius: 10px;
}

<head>
  <link rel="stylesheet" type="text/css" href="assets/custom/reset.css">
  <link rel="stylesheet" type="text/css" href="assets/custom/custom1.css">
</head>

<body>
  <div class="login_register_recover_box">&nbsp;fdfdss</div>
</body>

Thank you!

Small tip about your css. According to http://shouldiprefix.com/#box-shadow you don't need to use prefixes webkit and moz for box-shadow as it's already supported by all browsers. By the way, when you ask questions you should provide only important html and css and in this case all background gradients are unnecessary. :) — Jakub Muda, Mar 17 '18 at 19:07
Check out this solution: **https://jsfiddle.net/mk36h6xq/**, it should also fix your gradient issue. Unfortunately I can't post it as an answer anymore, because your question is marked as *duplicate*. — myfunkyside, Mar 17 '18 at 20:09

Sreekanth Reddy Balne · Answer 1 · 2018-03-17T18:28:17.350

1

Instead, you can use flexbox to achieve the same.

To center a div inside a parent, you can apply display:flex on the parent element along with align-items:center and justify-content:center;.

With align-items:center, the children are vertically centered inside parent.

With justify-content:center, the children are horizontally centered inside parent.

You can learn more at: A complete guide to CSS-FlexBox Tricks

.parent{
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:red;
}
.centered{
  width:100px;
  height:100px;
  background:blue;
}

<div class='parent'>
  <div class='centered'></div>
</div>

edited Mar 17 '18 at 18:28

answered Mar 17 '18 at 18:22

Sreekanth Reddy Balne

3,264
1
18
44

@downvoter, please do comment. – Sreekanth Reddy Balne Mar 17 '18 at 18:24
When using flexbox, align-items:center positions all child elements in the vertical center. If you want only a specific child to be in the center you can use align-self:center. It's just a small tip :) – Jakub Muda Mar 17 '18 at 19:03

score 1 · Accepted Answer · answered Mar 17 '18 at 18:29

Use flexbox

body{
    background-position: center;
    background: #0a056f;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

.login_register_recover_box{
    background-color: #fff;
    background-position: center;
    width: 75%;
    border-radius: 10px;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <div class="login_register_recover_box">&nbsp;
        fdfdss
    </div>
</body>

Margin 0 auto won't fully center a div

2 Answers2