垂直居中绝对定位块 | 垂直居中绝对定位块

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

问题描述

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

根据;如你所见，它是水平居中但不垂直...

感谢任何帮助，

编辑：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; 
}

小提琴：

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/

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