HTML div 居中

Question

有人知道如何在调整浏览器窗口大小时也实现垂直居中吗？

水平效果很好，图像大小调整也很好。我希望图片和链接始终在浏览器中间居中。

另外，为什么 ul 没有像图像那样居中而是向右移动了一点？

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

您可以使用 display: flex; 和 justify-content: center; 来实现这一点。我相信这是无需破解即可实现垂直居中的最佳方法。它也是跨浏览器和响应式的。

参见 jsfiddle