Question

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

Answer 1

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

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

Answer 2

您是否尝试过Vertical Centering in CSS

中的任何步骤

Answer 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));
})();

Answer 4

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

Answer 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>

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

5 个答案: