HTML/CSS: Center content both horizontally and vertically

Question

I want to center my content both vertically and horizontally in the page. I couldn't seem to get it working. Anyone here can help?

Thanks.

<style type = "text/css">
#loginMenu {
border:5px solid green;
padding:10px 10px 10px 10px;
background-color:#FF9;
display: table;
position: absolute;
text-align:center;
height: 200px;
width: 400px;
}
.centrediv
{
    margin: auto;
    vertical-align:middle;
}
</style>

<div id="loginMenu"></div>

Have you searched? There are _tons_ of questions identical to this. — jhpratt, Jun 10 '18 at 03:12
Please at least do a google search before you ask a question, A google search with the exact title of your question gives [these results](https://www.google.com/search?q=Center+content+both+horizontally+and+vertically). — Munim Munna, Jun 10 '18 at 10:30

score -1 · Answer 1 · answered Jun 10 '18 at 03:16

Flexbox does this the best. Example:

 <div class="Aligner">
      <div class="Aligner-item">…</div>
    </div>

        .Aligner {
           display: flex;
           align-items: center;
           justify-content: center;
        }
    .Aligner-item {
    max-width:50%;
    }

score -1 · Answer 2 · answered Jun 10 '18 at 08:06

You should use flexbox as it serves your need with ease. Have a look of the snippet:

<!-- HTML -->
    <body>
    <div></div>
    </body>

<!-- CSS -->

    body{
        display: flex;
        vertical-align: middle;
        height: 100vh;
        width: 100%;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin: 0px;
    }
    div{
        height: 100px;
        width: 100px;
        background-color: #f00;
        margin-top: -50px;
    }

score -2 · Answer 3 · answered Jun 10 '18 at 03:13

-2

Based on a page from W3Schools

.centrediv
{
    padding: 100px 0;
    text-align: center;
}

answered Jun 10 '18 at 03:13

DoomTay

316
1
6

HTML/CSS: Center content both horizontally and vertically

3 Answers3