-1

I need to align container in the centre as well as in the middle of the body. If I add margin-top it adds a white space above the container div and shifts the background image downwards too. I would prefer everything in percentage.

body {
  margin: 0px;
  height: 100%;
  background-image: url("../Images/LogIn/Background.jpg");
  background-size: 100% 100%;
}

html {
  height: 100%;
}

.Container {
  margin: auto;
  width: 60%;
  height: 80%;
  background-color: white;
  border-radius: 20px;
}

<div class="Container">
</div>
Andrew Morton
  • 24,203
  • 9
  • 60
  • 84
Jainam Doshi
  • 47
  • 10

2 Answers2

1

Put the following styles on the bottom to align your child div in the center:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
pretzelhammer
  • 13,874
  • 15
  • 47
  • 98
0
  .container{
    margin:auto;
    width: 50%
  }

Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.

<style>
  .container{
    margin:auto;
    width: 50%;
    background-color: grey;
  }
</style>
<body>
  <div class="container">
    <p> text </p>
  </div>
</body>

Also as a sidenote, you should avoid styling the body at all.

Community
  • 1
  • 1
Jeremi G
  • 405
  • 2
  • 8