如何在 HTML 页面的中心将多个图像居中？答案

【问题标题】：How to center multiple images at the center of a page in HTML?如何在 HTML 页面的中心将多个图像居中？
【发布时间】：2017-08-13 01:00:19
【问题描述】：

我想将 4 个盒子放在页面中心，即它们应该垂直居中和水平居中，一个盒子应该在最左边，一个在最右边，左边的盒子应该水平放置在两个极端之间. 我知道以前有人问过这样的问题，但我没有得到解决方案的确切逻辑。有人可以给出一个正确的解释吗？非常感谢。这是 HTML 代码-

.cards div{
    height: 200px;
    width: 200px;
    float: left;
    text-align: center;
    margin-left: 100px;
}
.card_1{
    background-color: green;
}
.card_2{
    background-color: blue;
}
.card_3{
    background-color: yellow;
}
.card_4{
    background-color: red;
}

<html>
    <head>
        <link rel="stylesheet" href="second.css">
    </head>
    <body>
        <div class="cards">
            <div class="card_1">
            </div>
            <div class="card_2">
            </div>
            <div class="card_3">
            </div>
            <div class="card_4">
            </div>
        </div>
    </body>
</html>

【问题讨论】：

你想让它们都在中心，比如它们相互重叠吗？
不，我不希望它们重叠
Best way to center a <div> on a page vertically and horizontally?的可能重复
@DanielBeck 您的链接不是他的问题的重复，因为他还试图使它们在页面上平均分布。

标签： html css center

【解决方案1】：

这是一个使用 flexbox 的解决方案：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.cards {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cards div {
    height: 200px;
    width: 200px;
}
.card_1 {
    background-color: green;
}
.card_2 {
    background-color: blue;
}
.card_3 {
    background-color: yellow;
}
.card_4 {
    background-color: red;
}

更多关于 flexbox 的信息：

编辑

这个解决方案的秘诀是

align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;

display: flex; 指示浏览器在渲染容器元素时使用 flexbox 布局。 flex-direction: row; 连续呈现容器的所有子项。 align-items: center; 垂直居中容器的子项。最后，justify-content: space-between; 将容器的每个子容器以相等的间距隔开。

Flexbox 是一个强大的布局系统。我建议通过 SO 或提供的链接了解更多信息。

请记住，所有主要浏览器都支持 flexbox，但 IE 11 由于存在一些错误，因此支持有限。

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出标记！ stackoverflow.com/help/how-to-answer
@Rob 感谢您花时间帮助改善社区。您包含的链接指出“任何让提问者朝着正确方向前进的答案都是有帮助的......”。我的链接有上下文，包括有关如何使用 flexbox 的教程。我觉得我的回答很有帮助，并指出了正确的方向。如果您觉得有更好的方法来回答这个问题，请提供答案或对我的进行编辑。我热烈欢迎社区的帮助。
链接失效。如果这些链接消失了，明天或几年后，您的帖子将成为没有任何帮助的代码帖子。在没有解释的情况下显示标记是没有帮助的。 SO 是一个教与学的社区，而不仅仅是一个链接列表
@Rob 我添加了进一步的解释。感谢您将这个答案引向更好的方向。