0

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

4

5 回答 5

1

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

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

于 2012-04-23T16:39:34.253 回答
0

您是否尝试过CSS 中垂直居中的任何步骤

于 2012-04-23T15:09:25.290 回答
0

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

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

($('#big2 .small').css('margin-top',($('#big2').height() - $('#big2 .small').height())/2));
})();
于 2012-04-23T15:22:47.860 回答
0

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

于 2012-04-23T15:31:39.440 回答
0

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

  1. 使用 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>

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

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>

于 2021-05-18T12:00:04.410 回答