HTML div 居中

Question

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

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

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

HTML

<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>

CSS

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;
    /* 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;
}

Answer 1

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

见jsfiddle

HTML div 居中

HTML div centering

html

css

centering