Css 在不知道高度的情况下将一个div居中

我有一个我知道高度的潜水器。里面有一个div，我不知道它的高度，因为它有可以更改的文本。我在Stackoverflow中找到了一些解决方案，但它不适合我，或者我没有正确使用它。在这种特殊情况下，有人能将div设置为小中心吗

您是否尝试过

中的任何步骤如果您想使用JQuery，您可以

(function(){
($('#big1 .small').css('margin-top',($('#big1').height() - $('#big1 .small').height())/2));

($('#big2 .small').css('margin-top',($('#big2').height() - $('#big2 .small').height())/2));
})();

---

我稍微修改了您的代码：

没有javascript，浮动大，或者像

display:table这样的技巧：

您可以通过两种方式完成此操作

所有最新浏览器都支持使用flex:Now flex属性。使用flex，父元素上的“对齐内容”和“对齐项目”属性将使div在中心对齐，而不考虑其高度

正文{
字体系列：塔荷马，日内瓦，无衬线；
字体风格：普通；
字体变体：正常；
颜色：#999999；
字体大小：11px；
字体大小：正常；
保证金：0；
填充：0；
字母间距：1px；
}
p{
填充：10px；
文本对齐：居中；
}
#大1{
位置：绝对位置；
左：100px；
顶部：100px；
宽度：360px；
高度：230像素；
背景色：#ccc；
背景尺寸：360px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#大2{
位置：绝对位置；
左：100px；
顶部：400px；
宽度：360px；
高度：230像素；
背景色：#ccc；
背景尺寸：360px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.小{
位置：绝对位置；
/*左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）*/
宽度：220px；
背景色：#FFF；
}

更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字，更多的文字

一些文本

I在大：显示：表格中添加；小：显示：表格单元格；垂直对齐：中间对齐；但它不起作用：你注意到他们嵌套了3个div吗？我不知道如何将此应用到我的案例中。这对我来说太复杂了。可能重复的绝对严重的重叠，我以前尝试过这个选项，但它们不能解决我的问题，因为我不知道内部div的高度，我需要在外部div中进行绝对定位。所以我认为我的情况不同，或者我没有很好地应用那个解决方案？很抱歉我的拼写错误。我来自欧洲的一个小国。我正在努力学习英语。如果内部div包含的文本太多，以至于开始溢出外部div，您希望发生什么？那外底除了内底外什么也装不下吗？没有文字或图像？其他标签？我不知道我是否明白。你为什么说得很清楚：两者都有；在大？只有当大是浮动的时候它才起作用。绝对位置有什么办法吗？绝对位置是垂直对齐的问题。小图层。如果未在样式表中指定，则top属性的默认值设置为0。若你们不能重构你们的HTML来删除绝对位置，那个么正如redlena回答的那个样，javascript是唯一的选择。它是有效的，但我不明白为什么。我想关键点是#big1:after，#big2:after，你能解释一下吗？那些是伪元素；你可以用它们做任何事。大多数情况下，它们用于添加文本，如计数器、章节号等。您还可以为它们添加边框，这些边框除了div的主边框外，还可以显示其他边框，等等。在这种情况下，诀窍是只需将
垂直对齐
拍打在
小
上，其本身不会产生任何效果；只能将图元与同一行上的图元垂直对齐。因此，通过给
大：在
之后一个与
大
本身相同的高度，你可以将它和
小
彼此垂直对齐，它们将具有相同的垂直中心。我不知道。你能把这个应用到我的例子中吗？