Vertically centring the element on the page

Question

I am unable to vertically align my form, literally tried everything. margin, vertical-align, height, position - tried applying everything but nothing seems to work.

Here is the html and css that i am using.

html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 50%;
    margin: auto auto;
    margin-left: 50%;
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}
.center{
    position: relative;
    width: 80%;
    height: 70%;
    margin: auto auto;
    border: 1px solid black;
}
table{
    height: 100%;
    margin: auto auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
<div class="center">
    <form action="#" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>

there are like 1000000 questions about it on stackoverflow – Flash Thunder Jul 10 '16 at 08:48 — Flash Thunder, Jul 10 '16 at 08:48
http://howtocenterincss.com – gearsdigital Jul 10 '16 at 08:52 — gearsdigital, Jul 10 '16 at 08:52

Sankar · Answer 1 · 2016-07-10T09:34:48.320

Try below:

Vertical-align will works with display:table;

html{
    position: relative;
    background-color: #e1e8f0;
    font-size:62.5%;
    margin: 0px;
    padding: 0px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 500px;
}
.navbar{
    border: none;
}
body{
    background-color: #e1e8f0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    position: relative;
    height: 500px;
    width: device-width;
}
.signup{
    position: relative;
    height: 100%;
    width: 100%;
  display:table;
    margin: auto auto;
   
    font-size: 1.6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border: 1px solid black;
}
.signup input{
    margin:20px;
    text-decoration: none;
    border: 1px solid #e4e6e8;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    border-radius: 5px;
    padding: 2px;
}
.message{
    width: 50%;
    float: left;
    overflow: hidden;
}
.message pre{
    overflow: hidden;
}

table{
    height: 100%;
    margin: auto auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="E:\d v/MEAN Lynda - Developing for the MEAN Stack and MongoDB/projects/others/css/my css.css">

</head>
<body>

<nav class="navbar navbar-default" style="background-color:#222222;color:red;">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="file:///E:/d%20v/MEAN%20Lynda%20-%20Developing%20for%20the%20MEAN%20Stack%20and%20MongoDB/projects/others/lib/login.html" style="color:#fff;">SITE NAME</a>
    </div>
    <div class="collapse navbar-collapse" id="#myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" style="color:#fff;" >WHO</a></li>
            <li><a href="#" style="color:#fff;" >Sign up</a></li>
            <li><a href="#" style="color:#fff;" >Login</a></li>
        </ul>
    </div>
  </div>
</nav>





<div class="signup">
    <form action="#" class="center-block" method="get">
        <table border="black">
            <tr>
                    <td><label for="emailId">Email id</label>
                    <td><input type="email" placeholder="you@example.com" id="emailId"></input><br>
            </tr>
            <tr>
                <td><label for="password">Password</label>
                <td><input type="password" placeholder="********" id="password"></input><br>
            </tr>
            <tr>
                <td><label for="name">Name</label>
                <td><input type="text" placeholder="Steve Jobs :)" id="name"></input><br>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit" class="btn btn-primary">Sign Up</button></td>
            </tr>
        </table>
    </form>
</div>

EDIT: Yes. use center-block class of bootstrap.

Can i do it without using vertical align. Or can i use margin: auto auto; or some other method to achieve that — user3516328, Jul 10 '16 at 09:30

score 0 · Answer 2 · answered Jul 10 '16 at 09:15

0

you have to apply style to the form

   <style>
        form {
        margin: 15% 40% 0;
        }
    </style>

answered Jul 10 '16 at 09:15

Akhil J

59
9

score 0 · Answer 3 · 2016-07-10T09:27:47.693

Few Solutions:

You can use flex and it's properties (justify-content and align-items) like vertical-align and add these lines to every parent of a child that you want to align vertically (e.g.: .center)

.center {
    display:-webkit-flex;
    display:flex;
    align-items:center;
    justify-content:center;
}

If you don't like the flex solution, you can set the parent's position to "relative" (position:relative;), and insert this code to the child:

.center {
    position:relative;
}

.center table {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

Hope it was helpful =]

Vertically centring the element on the page

3 Answers3

you have to apply style to the form