Question

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

水平可以很好地工作，以及图像重新调整大小。我希望图片和链接在浏览器中间始终居中。

另外，为什么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\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;
}

Answer 1

您可以使用display: flex;和justify-content: center;来实现此目标。我相信这是实现垂直居中而不进行黑客攻击的最佳方式。它也是跨浏览器和响应。

请参阅jsfiddle

HTML div居中

1 个答案: