CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22956

Center align a table vertically and horizontally

.cls_forgotpwd_container
{
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;
    /*margin: auto;*/
    width: 350px;
    display: table-cell;
    vertical-align: middle;
}

.cls_forgotpwd_table label
{
    margin-right: 10px;
}

.cls_forgotpwd_table input[type="password"]
{
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}

body
{
    display: table;
}
<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
            <tr>
                <td><label>Password</label></td>
                <td><input type="password" name="password"></input></td>
            </tr>
                <td><label>Confirm Password</label></td>
                <td><input type="password" name="confirm_password"></input></td>
            <tr>
                <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td>
            </tr>
            <tr>
            </tr>
            </tbody>
        </table>
    </form>
</div>

Doubts

1) I tried display: table and tabel-cell with vertical-align:middle But it is not working in my scenario. And this data is not tabular, so i don't think its a right way.

2) I don't prefer position absolute with top and left values in %. If i don't get other options, I will go with this one.

Is there any other possibilities to center align the div? Or Which one should i use in the above two options? If i have to choose option1, It's not working in my case.

I don't prefer margin to center align this. And flex is not supported by IE.

margin:0 auto with width:350px successfully center aligned the div.

Any Suggestions?

Upvotes: 2

Views: 91

Answers (2)

Stickers
Stickers

Reputation: 78676

It can be done easily with CSS transform, browser support: IE9+

JsFiddle Demo

.cls_forgotpwd_container {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

If you do need to support IE8+ here it is, see the comments inline.

JsFiddle Demo

html, body, .cls_forgotpwd_container {
    height: 100%; /*make all the contaniers to 100% height*/
}
body {
    margin: 0; /*reset default margin*/
}
.cls_forgotpwd_container {
    display: table;
    margin: 0 auto; /*horizontally center itself*/
}
.cls_forgotpwd_form {
    display: table-cell;
    vertical-align: middle; /*vertically center things inside*/
}

There is a small issue should be corrected - <input> is self-closing tag.

This is wrong <input></input>

This is correct <input> or <input/>

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 4503

your code

body, html - default - height: auto; width: auto;

.cls_forgotpwd_container
{
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;
    /*margin: auto;*/
    width: 350px;
    display: table-cell;
    vertical-align: middle;
}

.cls_forgotpwd_table label
{
    margin-right: 10px;
}

.cls_forgotpwd_table input[type="password"]
{
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}

body
{
    display: table;
    border: 2px solid #f00;
}
<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
            <tr>
                <td><label>Password</label></td>
                <td><input type="password" name="password"></input></td>
            </tr>
                <td><label>Confirm Password</label></td>
                <td><input type="password" name="confirm_password"></input></td>
            <tr>
                <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td>
            </tr>
            <tr>
            </tr>
            </tbody>
        </table>
    </form>
</div>

so that would be centered necessary for body and html add - height: 100% and width: 100%

html, 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: table;     
    border: 3px solid #f00;
}

.cls_forgotpwd_container {
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;      
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.cls_forgotpwd_container form{
    display: inline-block;
    border: 1px solid #ccc;
}
.cls_forgotpwd_table label {
    margin-right: 10px;
}
.cls_forgotpwd_table input[type="password"] {
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}
<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
                <tr>
                    <td>
                        <label>Password</label>
                    </td>
                    <td>
                        <input type="password" name="password"></input>
                    </td>
                </tr>
                <td>
                    <label>Confirm Password</label>
                </td>
                <td>
                    <input type="password" name="confirm_password"></input>
                </td>
                <tr>
                    <td>
                        <input class="cls_submit" type="submit" name="submit" value="Change It"></input>
                    </td>
                </tr>
                <tr></tr>
            </tbody>
        </table>
    </form>
</div>

Upvotes: 1

Related Questions