0

Here is my code, I just can't get the login div to sit vertically aligned.

Code:

main {
 display:flex;
}
.loginForm {
 margin: auto;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
}
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="includes/css/basic.css" rel="stylesheet" type="text/css">
<link href="includes/css/layout.css" rel="stylesheet" type="text/css">
</head>

<body>

 <main>
  <div class="loginForm">
   Login
  </div>
 </main>
 <footer>
  Footer
 </footer>
</body>
</html>

But it just doesn't work. Can anyone give me any advice?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tony Savage
  • 37
  • 5
  • 1
    While you haven't specified *how* you want it to be aligned, the answer is surely in one of the duplicate targets. – TylerH Jan 09 '20 at 20:53
  • Please read [**How to create a Minimal, Reproducible Example**](https://stackoverflow.com/help/minimal-reproducible-example) – NullDev Jan 09 '20 at 20:54
  • I've looked at a few of the other questions, but the code is laid out different to mine so I can't quite see how mine isn't working. I've googled as well without any joy. – Tony Savage Jan 09 '20 at 20:56
  • 1
    I am looking to vertically align the main div so have it exactly centre of the page but the div is a variable size – Tony Savage Jan 09 '20 at 20:57
  • In this case add align-items: center; justify-content: center; height: 100% to .main, and there is no need for margin: auto; on .loginForm .And try to understand how it's work @Tony Savage – Liveindream Jan 09 '20 at 22:58

0 Answers0