Html 在父Div内居中两个子Div

我知道这个问题已经讨论了很久，但我似乎找不到解决这个问题的答案。这是一个简单的例子来说明我的问题。我在父

div

中有两个子

div

元素，我希望它们在父

div

中水平居中。这是小提琴：

#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
}
.瓷砖{
宽度：20em；
高度：40公分；
边框：纯黑1px；
显示：内联块；
保证金：1.5em自动；
}

---

当您使用

显示：内联块时

默认为

垂直对齐：底部

以便将

.tile

的css设置为

垂直对齐：中间和
文本对齐：居中
到
#容器

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}

工作代码：
当您使用显示：内联块时默认为垂直对齐：底部

以便将

.tile

的css设置为

垂直对齐：中间和
文本对齐：居中
到
#容器

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}

工作代码：
您可以将边距：自动添加到.tile和文本对齐：居中添加到#容器

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
文本对齐：居中；
}
.瓷砖{
宽度：20em；
高度：40公分；
边框：纯黑1px；
显示：内联块；
保证金：自动；
}

这个标题将div向下移动。为什么？
您可以将
边距：自动
添加到
.tile
和
文本对齐：居中
添加到
#容器

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
文本对齐：居中；
}
.瓷砖{
宽度：20em；
高度：40公分；
边框：纯黑1px；
显示：内联块；
保证金：自动；
}

这个标题将div向下移动。为什么？
将以下代码添加到
#容器中
：

display: flex;
justify-content: center;
align-items: center;

实时片段


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.瓷砖{
宽度：20em；
高度：40公分；
边框：纯黑1px；
显示：内联块；
保证金：1.5em0；
}

将以下代码添加到
#容器中
：

display: flex;
justify-content: center;
align-items: center;

实时片段


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.瓷砖{
宽度：20em；
高度：40公分；
边框：纯黑1px；
显示：内联块；
保证金：1.5em0；
}
您可以添加：.title{display:block；}


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
}
.瓷砖{
边框：1px纯黑；
显示：块；
高度：40公分；
保证金：1.5em自动；
宽度：20em；
文本对齐：对齐；
填充：7px；
}
h3{
保证金：0；
填充：0；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。
您可以添加：.title{display:block；}


#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
}
.瓷砖{
边框：1px纯黑；
显示：块；
高度：40公分；
保证金：1.5em自动；
宽度：20em；
文本对齐：对齐；
填充：7px；
}
h3{
保证金：0；
填充：0；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，
读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。


#容器{
填充：25%；
文本对齐：居中；
背景：#e7e7e7；
}
.瓷砖{
背景：白色；
显示：内联块；
填充：20%；
}

这个标题将div向下移动。为什么？


#容器{
填充：25%；
文本对齐：居中；
背景：#e7e7e7；
}
.瓷砖{
背景：白色；
显示：内联块；
填充：20%；
}

这个标题将div向下移动。为什么？
I应该指定希望子
div
s是内联的。这就是为什么我将内联块列为显示。我在其他帖子上读到过，这可能会导致问题。我应该指定我希望子
div
s是内联的。这就是为什么我将内联块列为显示。我在其他帖子上看到过，这可能会引起问题。谢谢！！这真是太棒了！你能简单地解释一下CSS实际上在做什么吗？我读了另一篇文章，其中提到了dispaly:flex，但当我查找它时，似乎这不是我想要的。我想我应该更深入地了解它。再次感谢你的帮助！不客气！
justify content
和
align items
都定义了浏览器如何在元素之间分配空间，但是
justify content
控制水平对齐，而
align items
控制垂直对齐。要了解更多信息，请查看MDN。大致正确。如果添加
flex wrap:wrap在
#容器中