3种实现CSS 上下居中的办法

tw4ld6

<center>在CSS里欠好使了,在CSS里 处理上下居中问题又能支持both IE和Firefox的有3种方法:

第1种,上下居中文字:

办法是运用line-height,由于line-height便是用来定义文字行与行之间的距离,因此定义文字框的line-height等于框的高度能够让文字上下居中.

h1 { font-size: 3em; height: 100px; }

必须重视的是:倘若中间的文字不只一行,并且运用分行表示的时候，这个就欠好用了。

第二种,非文字的上下居中:

运用absolute positioning，必须重视的是这个办法只能在框有定义好的高度才可工作. 不适合动态高度的框.

假如代码为:

Hi, ImVertically Aligned Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.

要上下居中 CSS编写为:

.vert { width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; }

上边的margin计算公式为:

* Width of Element / 2 = Negative Left Margin * Height of Element / 2 = Negative Top Margin

第三种办法:

Content here#floater{float:left; height:50%; margin-bottom:-120px;} #content{clear:both; height:240px; position:relative;}

啊呀呀

哈哈、笑死我了、太搞笑了吧等。