HTML div centering

Question

Does anybody knows how to achieve vertical centering also when re-sizing browser window?

Horizontal works nicely, as well as image re-size. I want both picture and links to be centered all the time in the middle of the browser.

Also, why ul is not centered as well as image but moved to the right a little bit?

Here is an example JSFiddle

HTML

    body {
        background: black;
        color: white;
    }
    #container {
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        right:0;
        z-index:100;
    }
    #logo {
        text-align: center;
        position:fixed;
        width:80%;
        z-index:101;
        left:50%;
        margin: 20% auto auto -40%;
    }
    img {
        max-width: 100%;
        height: auto;
        width: auto\9;
        /* ie8 */
    }
    #logo ul li {
        display: inline;
        list-style: none;
        padding: 8px;
    }
    #logo ul li a {
        color: white;
    }
    .fa-facebook-square:hover {
        color: gray;
    }
    .fa-twitter-square:hover {
        color: gray;
    }
    .fa-vimeo-square:hover {
        color: gray;
    }
    .fa-envelope-square:hover {
        color: gray;
    }
    .fa-download:hover {
        color: gray;
    }

    <div id="container">
        <div id="logo">
            <img src="img/flaster_stiropor.png" width="800" alt="flaster" />
            <ul>
                <li><a href="#" target="_blank"><i class="fa fa-facebook-square fa-lg"></i></a>
                </li>
                <li><a href="#" target="_blank"><i class="fa fa-twitter-square fa-lg"></i></a>
                </li>
                <li><a href="#" target="_blank"><i class="fa fa-vimeo-square fa-lg"></i></a>
                </li>
                <li><a href="#"><i class="fa fa-envelope-square fa-lg"></i></a>
                </li>
                <li><i class="fa fa-download fa-lg"></i>
                </li>
            </ul>
        </div>
    </div>

Did you try using your favourite internet search for solution to vertical alignment in div elements? And please don't expect us to read all that code, instead make it work as either a Snippet or use http://jsfiddle.net — freefaller, Sep 22 '15 at 15:21
@freefaller: Please don't expect us to [make a JSFiddle for you](http://jsfiddle.net/516jufof/). Show what JSFiddle you have tried so far, and which part you are specifically having issues with... — musefan, Sep 22 '15 at 15:22
Erm, any reason you're tell me off @musefan instead of the OP? — freefaller, Sep 22 '15 at 15:23
@freefaller: Because you have been a very naughty boy... you asked for a JSFiddle but didn't show your attempts. you know, like how you are telling OP the same thing.. don't worry about it, I don't require your understanding — musefan, Sep 22 '15 at 15:26
@musefan - erm, ok. :-/ I'll presume there is supposed to be some humour in there, but it's gone straight over my head, sorry — freefaller, Sep 22 '15 at 15:28
Why should @freefaller make the JS Fiddle? The OP should make it. — Paul Redmond, Sep 22 '15 at 15:29
possible duplicate of [How to center a div vertically?](http://stackoverflow.com/questions/4416130/how-to-center-a-div-vertically) — Sleek Geek, Sep 22 '15 at 15:50
@PaulRedmond: OP doesn't need a fiddle, the code is pretty concise and it replicates the issue which is what we ask of questions. This is a decent question from a fairly inactive asker — musefan, Sep 22 '15 at 15:59
@musefan Fair enough, I just don't get your response asking the other user to make a fiddle. — Paul Redmond, Sep 22 '15 at 16:06
twas but a joke. freefaller suggested OP could have easily done this themselves. Then asked for OP to do a fiddle (which freefaller could have easily done themselves too). When you get to know me you will learn my jokes are only ever meant to be funny for my benefit, if others laugh then that's fine, but it's not my aim in life — musefan, Sep 22 '15 at 16:09
I am sorry if I did something against the rules. Before I posted question here, I tried as many solutions as I could find using search. — urlator, Sep 22 '15 at 17:53

score 2 · Accepted Answer · answered Sep 22 '15 at 15:31

2

You can use display: flex; and justify-content: center; to make this possible. I believe it is the best way to achieve vertical centering without hacking. It is cross-browser and responsive too.

See the jsfiddle

answered Sep 22 '15 at 15:31

Abdul Sadik Yalcin

1,744
2
19
50

thanks a lot man. only thing left is that list items are not centered when window is minimal size. it's still a little bit to the right. – urlator Sep 22 '15 at 17:48
Try setting a width in pixels and do `margin: 0 auto;`. I don't recommend using `left: 50%;` or anything similar by the way. – Abdul Sadik Yalcin Sep 22 '15 at 18:08
I solved it by using table instead of unordered list. – urlator Sep 22 '15 at 20:14

HTML div centering

1 Answers1