垂直居中绝对定位块 [英] Vertical Centering Absolutely Positioned Block

查看:95
本文介绍了垂直居中绝对定位块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好的,所以我试图集中一个动态内容的div(它的宽度和高度都是未知的,因为文本占据了未知的空间和包裹未知的行数)。



根据这篇文章



但是当我将同样的原理应用到垂直居中时,

/ strong> http://jsfiddle.net/nMqJG/2/ ;如你所见,它是水平居中但不垂直...



感谢任何帮助,



编辑:FYI,我正在使用FF10.0.2


解决方案

如果您不需要支持旧的浏览器,请使用 display:table-cell 此处的详情



HTML:

 < div class =wrapper> 
< div class =in>
动态内容动态内容动态内容动态内容
< / div>
< / div>

CSS:

 code> .wrapper {
border:1px solid#F00;
width:200px;
height:200px;
display:table-cell;
vertical-align:middle
}

.in {
border:1px solid#00F;
}

小提琴: http://jsfiddle.net/nMqJG/25/


Ok, so I am trying to center a div with dynamic content (both its width and height are unknown because the text takes up unknown space and wraps an unknown amount of lines).

Per this post, I managed to center the div horizontally.

However when I apply the same principle to vertical centering, the block only moves 50% down (and doesn't move up at all).

JSFiddle of my problem here: http://jsfiddle.net/nMqJG/2/ ; as you can see, it is centered horizontally but not vertically...

Thanks and any help appreciated,

Edit: FYI, I am using FF10.0.2

解决方案

If you don't need to support old browsers, use display: table-cell. Details here

HTML:

<div class="wrapper">
    <div class="in">
        DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT
    </div>
</div>

CSS:

.wrapper{
    border:1px solid #F00;
    width:200px;
    height:200px;
    display: table-cell;
    vertical-align: middle        
}

.in{
    border:1px solid #00F;
}

Fiddle: http://jsfiddle.net/nMqJG/25/

这篇关于垂直居中绝对定位块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆