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

Posted 2023-03-05

【中文标题】在不知道高度的情况下将 div 居中

【英文标题】：Center a div without knowing the height

【发布时间】：2012-05-04 05:13:32

【问题描述】：

我有一个知道高度的 div。里面有一个我不知道高度的 div，因为它有可以改变的文本。我在 *** 中找到了一些解决方案，但它对我不起作用或者我没有正确使用它。在这种特定情况下，任何人都可以将 div 居中吗？ http://jsfiddle.net/JTTEM/2/

【问题讨论】：

How to horizontal & vertical center a div?的可能重复

与***.com/a/6268813/773322绝对严重重叠

我之前尝试过这些选项，但它们并没有解决我的问题，因为我不知道内部 div 的高度，并且我需要在外部 div 中进行绝对定位。所以我认为我的情况不同，或者我没有很好地应用这些解决方案？

抱歉我的拼写错误。我来自欧洲的一个小国。我正在努力学习英语。

如果内部 div 包含太多文本以至于它开始溢出外部 div，你想发生什么？外部 div 会只包含内部 div 吗？没有文字或图片？其他标签？

【参考方案1】：

没有javascript，浮动大，或者像display:table这样的技巧：

http://jsfiddle.net/JTTEM/10/

【讨论】：

它有效，但我不明白为什么。我想重点是#big1:after, #big2:after 你能解释一下吗？

那些是伪元素；您可以将它们用于任何事情。大多数情况下，它们用于添加文本，例如计数器、章节编号等。您还可以给它们添加边框，除了 div 的主要边框之外，它们还显得额外等等。在这种情况下，诀窍是仅在small 上拍打vertical-align 本身什么都不做；您可以vertical-align 一个元素，该元素只能与同一行上的元素。因此，通过为big:after 赋予与big 本身相同的高度，您可以将其与small 垂直对齐，并且它们将具有相同的垂直中心。

【参考方案2】：

您是否尝试过Vertical Centering in CSS 中的任何步骤

【讨论】：

我在 big: display: table;小：显示：表格单元格；垂直对齐：中间；但它不起作用：jsfiddle.net/JTTEM/5

你注意到它们嵌套了 3 个 div 吗？

我不知道如何将此应用于我的案例。这对我来说太复杂了。

【参考方案3】：

如果你想使用 JQuery，你可以这样做......

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

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

【讨论】：

我不知道明白。你能在我的例子中应用这个吗？ jsfiddle.net/JTTEM/2

【参考方案4】：

我稍微修改了你的代码：http://jsfiddle.net/JTTEM/8/

【讨论】：

我不确定我是否理解。为什么要说清楚：两者；在大？

只有在 big 为 float 时才有效。有没有绝对位置的方法？

绝对位置是垂直对齐 .small 层的问题。如果您未在样式表中指定，则 top 属性的默认值设置为 0。如果您无法重构 html 以删除绝对位置，那么 javascript 是 redlena 回答的唯一选项。

【参考方案5】：

您可以通过两种方式做到这一点。

使用 flex：现在所有最新的浏览器都支持 flex 属性。在父元素上使用 flex、justify-content 和 align-items 属性将使 div 居中对齐，无论其高度如何。

body 
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing:1px;


p 
    padding: 10px;
    text-align: center;


#big1 
    position:absolute;
    left:100px;
    top:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
    display:flex;
    align-items: center;
    justify-content: center;


#big2 
    position:absolute;
    left:100px;
    top:400px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
    display:flex;
    align-items: center;
    justify-content: center;


.small 
    position:absolute;
    /*left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
    width:220px;
    background-color:#FFF;

<div id="big1">
    <div class="small"><p>some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more textsome more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text</p></div>
</div>

<div id="big2">
    <div class="small"><p>Some Text</p></div>
</div>

将绝对位置和变换属性应用到它的子元素将对齐到它的父元素的中心。此解决方案适用于所有现代浏览器。

body 
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing:1px;


p 
    padding: 10px;
    text-align: center;


#big1 
    position:absolute;
    left:100px;
    top:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;


#big2 
    position:absolute;
    left:100px;
    top:400px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;


.small 
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:220px;
    background-color:#FFF;

<div id="big1">
    <div class="small"><p>some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more textsome more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text</p></div>
</div>

<div id="big2">
    <div class="small"><p>Some Text</p></div>
</div>