Html 是否可以使用css将几个高度未知的div放置在父div的中心？_Html_Css

Html 是否可以使用css将几个高度未知的div放置在父div的中心？

html css

Html 是否可以使用css将几个高度未知的div放置在父div的中心？,html,css,Html,Css,给定以下HTML： <!DOCTYPE html> <html> <body> <div id="parent" style="border:1px solid #666;width:600px;height:200px;padding:5px;"> <div id="child1" style="border:1px solid #666;float:left;margin-left:10px;display:inline-block;"

给定以下HTML：

<!DOCTYPE html>
<html>
<body>

<div id="parent" style="border:1px solid #666;width:600px;height:200px;padding:5px;">
<div id="child1" style="border:1px solid #666;float:left;margin-left:10px;display:inline-block;">How<br>are<br>you?</div>
<div id="child2" style="border:1px solid #666;float:left;margin-left:100px;">How are you?</div>
<div id="child3" style="border:1px solid #666;float:right;margin-right:40px;">How are you?<br>How are you?<br>How are you?</div>
</div>



</body>
</html>



你好吗？
你好吗
你好吗？
你好吗？
你好吗？

是否可以将三个子div放在父div的中心，以制作如下屏幕截图

子div的高度可能会随着内部文本的变化而变化，因此无法使用属性

top

、

margin top

和

position:absolute

将子div定位在中心，因为子div的高度不是固定的，随着高度的变化，必须不断地改变值

边距顶部

。有更好的方法吗？

您好，现在您可以尝试以下方法：-

显示：表格

和

显示：表格单元格

属性如下所示

#父级{
显示：表格；
宽度：100%；
}
#孩子1，孩子2，孩子3{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
边框：实心1px红色；
宽度：33%；
}



你好吗？
你好吗
你好吗？
你好吗？
你好吗？

这是您发布的图像的动态flexbox再现。希望它和你要找的相似

屏幕截图：

现场演示：

#父级{
显示器：flex；
证明内容：周围的空间；
边框：1px实心#666；
宽度：600px；
高度：200px；
填充物：5px；
}
.孩子{
自对准：居中；
}
.child>div{
显示：内联块；
边框：1px实心#666；
}


怎样

是

你呢？
你好吗
你好吗

你好吗？

你好吗？

hmm。。。您是否尝试过使用百分比%而不是像素px？或者说，你想达到什么目的？如果你想达到这个目的，请检查这个。