Trying to center login form in between header and footer

Question

How do I center the login form in between the header and footer? It is right now touching the header but I need it to be centered in between the header and the footer. As you can see below, I tried setting the width and height of the child element (which is the container) of the parent element (which in this case is the tag. Any help would be wonderful. I am new to coding, and am looking to learn the right way to do things. Thank you!! I tried following this link: How do I make a div full screen? but was not successful.

  
        .container {
        width: 100%;
        height: 100%;
    }
    
    @media only screen and (max-width: 375px) {
        #col-6 {
            display: flex;
            margin: 0;
            padding: 0;
        }
        #login {
            font-size: .95em;
            padding-top: 6px;
    
        }
        #username::placeholder {
            font-size: .75em;
        }
    
        #password::placeholder {
            display: none;
            font-size: .75em;
        }
    }
    
    @media only screen and (max-width: 412px) {
        #col-6 {
            display: flex;
            margin: 0;
            padding: 0;
        }
        #login {
            font-size: .95em;
            padding-top: 6px;
    
        }
        #username::placeholder {
            font-size: .75em;
        }
    
        #password::placeholder {
            font-size: .74em;
        }
    }

<div class="container">
      <div class="row">
        <div class="col-6 mx-auto" id="col-6">
          <div class="card" id="card">
            <div class="card-header">
              <p class="h3" id="login">LOGIN</p>
            </div>
            <div class="card-body">
              <form class="form" role="form" autocomplete="off" id="loginForm" method="POST">
                <div class="form-group mx-sm-3 mb-2">
                  <label for="username">Username</label>
                  <input type="text" class="form-control" id="username" placeholder="" required>
                </div>
                <div class="form-group mx-sm-3 mb-2">
                  <label for="password">Password</label>
                  <input type="password" class="form-control" id="password" placeholder=""
                    required>
                </div>
                <div class="col-12 text-center">
                  <button type="button" class="btn btn-primary btn-lg btn-danger" id="button" (click)="onClickSubmitButton()">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

Pls dont include such a big link in your post – J.vee Dec 05 '18 at 15:44 — J.vee, Dec 05 '18 at 15:44
will do, thank you for the advice!! – Mike_Smith Dec 05 '18 at 15:45 — Mike_Smith, Dec 05 '18 at 15:45

score 1 · Answer 1 · answered Dec 05 '18 at 15:53

You can achieve this by making the card itself a flexbox with flex-direction set to row(by default), justify-content: space-between; and align-items: center; to space and align them equally. to learn more on using flexbox visit https://developer.mozilla.org/en-US/docs/Glossary/Flexbox

score 1 · Answer 2 · answered Dec 07 '18 at 14:13

You can try this :

html,body{
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}

.container{
height: 100%;
align-content: center;
}

.card{
height: 370px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}

.card-header h3{
color: white;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

<html>
<head>
<link rel="stylesheet" href="style.css">
<!--Bootsrap 4 CDN-->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title></title>
</head>
<body>
 <div class="container">
 <div class="d-flex justify-content-center h-100">
  <div class="card">
   <div class="card-header">
    <h3>LOGIN</h3>
   </div>
   <div class="card-body">
    <form>
     <div class="input-group form-group">
      <input type="text" class="form-control" placeholder="username">
      
     </div>
     <div class="input-group form-group">
      <input type="password" class="form-control" placeholder="password">
     </div>
     <div class="form-group">
      <button type="button" class="btn btn-primary btn-lg btn-danger" id="button" (click)="onClickSubmitButton()">Submit</button>
     </div>
    </form>
   </div>
  </div>
 </div>
 </div>
</body>
</html>

score 0 · Answer 3 · answered Dec 05 '18 at 16:01

you are using bootstrap here. You may not linked the bootstrap CDN correctly. Try the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        .container {
            width: 100%;
            height: 100%;
        }

        @media only screen and (max-width: 375px) {
            #col-6 {
                display: flex;
                margin: 0;
                padding: 0;
            }
            #login {
                font-size: .95em;
                padding-top: 6px;

            }
            #username::placeholder {
                font-size: .75em;
            }

            #password::placeholder {
                display: none;
                font-size: .75em;
            }
        }

        @media only screen and (max-width: 412px) {
            #col-6 {
                display: flex;
                margin: 0;
                padding: 0;
            }
            #login {
                font-size: .95em;
                padding-top: 6px;

            }
            #username::placeholder {
                font-size: .75em;
            }

            #password::placeholder {
                font-size: .74em;
            }
        }

    </style>
</head>
<body>

    <div class="container">
          <div class="row">
            <div class="col-6 mx-auto" id="col-6">
              <div class="card" id="card">
                <div class="card-header">
                  <p class="h3" id="login">LOGIN</p>
                </div>
                <div class="card-body">
                  <form class="form" role="form" autocomplete="off" id="loginForm" method="POST">
                    <div class="form-group mx-sm-3 mb-2">
                      <label for="username">Username</label>
                      <input type="text" class="form-control" id="username" placeholder="" required>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <label for="password">Password</label>
                      <input type="password" class="form-control" id="password" placeholder=""
                        required>
                    </div>
                    <div class="col-12 text-center">
                      <button type="button" class="btn btn-primary btn-lg btn-danger" id="button" (click)="onClickSubmitButton()">Submit</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

</body>
</html>

alodrummer · Answer 4 · 2018-12-05T17:48:45.760

There are two adjustments you need to make here. First, a height percentage on the root element (.container) can't reference the innerHeight of the window. Use vh (viewport height) units, instead. Set the height of .container to 100vh. The div will expand to the height of the viewport.

Second, you can center the form by setting display:flex and align-items:center; on .container. align-items:center; will center the form vertically. If you want to also center the form horizontally add justify-content:center.

CSS rules for .container should look like this:

   .container {
       width: 100%;
       height: 100vh;
       display: flex;
       align-items: center;
   }

A great reference for css flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Trying to center login form in between header and footer

4 Answers4