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>

Answer 1

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