HTML div 居中答案

【问题标题】：HTML div centeringHTML div 居中
【发布时间】：2015-09-23 00:01:38
【问题描述】：

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

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

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

【问题讨论】：

您是否尝试过使用您最喜欢的互联网搜索来解决 div 元素中的垂直对齐问题？请不要指望我们会阅读所有代码，而是将其作为代码段工作或使用jsfiddle.net
@freefaller：请不要指望我们make a JSFiddle for you。显示到目前为止您尝试过的 JSFiddle，以及您具体遇到的问题...
呃，你有什么理由告诉我 @musefan 而不是 OP？
@freefaller：因为你是一个非常顽皮的男孩......你要求一个 JSFiddle，但没有展示你的尝试。你知道的，就像你告诉 OP 一样的事情......别担心，我不需要你的理解
How to center a div vertically?的可能重复

标签： html css centering

【解决方案1】：

您可以使用display: flex; 和justify-content: center; 来实现这一点。我相信这是在没有黑客攻击的情况下实现垂直居中的最佳方法。它也是跨浏览器和响应式的。

见jsfiddle

【讨论】：

非常感谢。唯一剩下的是当窗口最小时列表项不居中。还是偏右一点。
尝试以像素为单位设置宽度并执行margin: 0 auto;。我不建议使用left: 50%; 或类似的方式。
我通过使用表格而不是无序列表解决了这个问题。