居中父母Div内的两个子Div Div
我知道这已经被详细讨论过了，但我似乎无法找到解决此问题的答案。这是一个简单的例子来说明我的问题。我在父母div内有两个子女div，我希望他们在父母div内水平居中。这里是小提琴：居中父母Div内的两个子Div Div
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
}<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>现在是没有办法，我很想念一个简单的解决方案？此外，我还有一个关于h3标签的第二个问题。当h3标签周围的评论被删除时，第一个div向下移动。 h3标签怎么样导致div下移，我该如何防止它发生？
感谢您的回答和您的帮助，对于潜在的重复问题，我表示抱歉。
添加以下代码#container：
display: flex;
justify-content: center;
align-items: center;
直播片段
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em 0;
}<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>
当您使用默认display:inline-block是vertical-align: bottom;，这样一套的CSS .tile到vertical-align: middle;和text-align:center到#container
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
vertical-align: middle;
}
您可以到.tile和text-align:center添加margin:auto到#container
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
text-align: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: auto;
}<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>谢谢！这和以下关于显示的评论一样有效：flex。你能解释为什么这些CSS的工作是为了实现这个目的吗？我试图更好地理解，以避免将来出现这样的简单问题。 – prestondoris
'text-align'指定元素内的水平对齐，所以它放在'＃容器'的中间。所以这个作品 – Dij
您可以添加：.title {display：block; }
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
border: 1px solid black;
display: block;
height: 40em;
margin: 1.5em auto;
width: 20em;
text-align:justify;
padding:7px;
}
h3 {
margin: 0;
padding: 0;
}<div id="container">
<div class="tile">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="tile">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>我应该指定我希望孩子的div是内联的。这就是为什么我把内联块列为显示。我已阅读其他帖子，可能会导致问题。 – prestondoris
` `
#container {
padding:25%;
text-align:center;
background:#e7e7e7;
}
.tile{
background:white;
display:inline-block;
padding:20%;
}<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>
谢谢!!这很奇妙！你能简单地解释一下这个CSS实际上在做什么吗？我读了另一篇文章，提到了显示器：flex，但是当我查看它时，它似乎不是我想要的。我想我应该更深入地阅读它。再次感谢你的帮助！ – prestondoris
不客气！ 'justify-content'和'align-items'定义了浏览器如何在元素之间分配空间，但是justify-content控制水平对齐，而align-items控制垂直对齐。有关更多信息，请查看[justify-content]（https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content）和[align-items]（https：//developer.mozilla。来自MDN的org/en-US/docs/Web/CSS/align-items）。 – cypark
所以我对这个例子进行了扩展，并在父'div'内添加了更多'div's，并且子'div'元素保持在同一行，并且只需在同一行内缩小宽度以适应父项。我假设这是因为父'div'的'flex'正在告诉孩子“适应”内部。我是否正确理解这一点？ – prestondoris