Get my login in middle of screen, both vertical and horizontal

Question

I have created an html file called Login. Here i have made a form with an userId input, and password input.

I want my login form to be in the middle of the screen (not just align="center"), anyone knows how to handle that?

my code so far:

<meta charset="ISO-8859-1">
<title>Please Login!</title>

<style>
body {
position: relative;
}

#form-relative {
width: 300px;
height: 200px; 
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; 
margin-left: -150px; 
}
</style>

</head>
<body style="background-color: #ECF6FE">

<div id="form-wrapper">
    <form method="post" id="Login" action="validateLogin.jsp">
        <table>
            <tr>
                <td>Enter userID:</td>
                <td><input type="text" name="userid"></td>
            </tr>

            <tr>
                <td>Enter password:</td>
                <td><input type="password" name="password"></td>
            </tr>

            <tr>
                <td><br> <input type="submit" value="Login" />  <input
                    type="reset" value="Cancel" /><br /></td>
            </tr>

        </table>


    </form>
</div>

<div></div>

<h6 align="center">Note! An admin operator must use "admin" as
    username and "masterkey" as password</h6>

</body>
</html>

[you really shouldnt use tables for layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — celeriko, May 02 '14 at 15:05
your HTML is invalid. You are missing a `` on line 11 of that snippet. — Joseph Marikle, May 02 '14 at 15:13

Teknotica · Accepted Answer · 2014-05-02T15:28:56.957

3

If you have a set width and height you could use some CSS:

HTML:

<body>
    <div id="form-wrapper">
        <form>
            <!-- Your form here -->
        </form>
    </div>
</body>

CSS:

body {
    position: relative;
}

#form-wrapper {     
    width: 300px;           /* Set this to your convenience */
    height: 200px;          /* Set this to your convenience */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;     /* Half of height */
    margin-left: -150px;     /* Half of width */
}

edited May 02 '14 at 15:28

answered May 02 '14 at 15:08

Teknotica

1,096
6
19

please , i have edited my code, but it still dosen't work, is my style right set up? – Pixel May 02 '14 at 15:23
Change #form-relative to #form-wrapper in your CSS, as that's the name of your selector. Also, make sure is being open at the start of your file (assuming you just copied a partial code) – Teknotica May 02 '14 at 15:27

score 2 · Answer 2 · answered May 02 '14 at 15:11

Here's my take on the thing. First of all, this will never work unless you have a fixed width and height. It just doesn't work to have a dynamically sized container centered in HTML/CSS as far as I have seen so far. If you can have a set width and height, however, it's easy. My favorite method is setting position:absolute and giving top, left, right, and bottom attributes 0 and setting margin:auto

Like so: http://jsfiddle.net/Jj422/

form {
    width: 300px; /* this is needed */
    height: 200px; /* this is needed */
    padding: 10px; /* this is for styling only */
    background: #eee; /* this is for styling only */

    position: absolute; /* this is needed */
    margin: auto; /* this is needed */
    left: 0; /* this is needed */
    right: 0; /* this is needed */
    top: 0; /* this is needed */
    bottom: 0; /* this is needed */
}

score 0 · Answer 3 · answered May 02 '14 at 15:03

0

put your form in another div and give that div these styles:

margin-left:auto;

margin-right:auto;

text-align:center;

Good luck!

answered May 02 '14 at 15:03

How should i write it? says an error here.
– Pixel May 02 '14 at 15:05
margin-left = auto; says its undefined name – Pixel May 02 '14 at 15:07
ur form – May 02 '14 at 15:19

Anjali Achuthan · Answer 4 · 2018-12-05T06:49:21.443

0

body,html,#root
{
height:100%;
}
#form-wrapper
{
height: 100%;
width: 100%;
background-color: #000;
display:flex;
justify-content:center;
align-items:center;
}


#login
{
height:50%;
width: 50%; 
background-color:#fff;
}

edited Dec 05 '18 at 06:49

answered Dec 05 '18 at 06:19

Anjali Achuthan

1
1

2

Code-only answers are discouraged. Please click on edit and add some words as to how your code addresses the question, or perhaps explain how your answer differs from the previous answer/answers. Thanks – Nick Dec 05 '18 at 06:36
I am sorry am not able to add comments – Anjali Achuthan Dec 05 '18 at 07:04
1

Use the `edit` link under your answer to add an explanation, not comments. – Nick Dec 05 '18 at 07:05

Get my login in middle of screen, both vertical and horizontal

4 Answers4