3種實作CSS 上下居中的方法

​

<center>在CSS裡不好使了,在CSS裡 解決上下居中問題又能支援both IE和Firefox的有3種方案:

第一種,上下居中文字:

方法是使用line-height,因為line-height就是用來定義文字行與行之間的距離,是以定義文字框的line-height等于框的高度可以讓文字上下居中.

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

需要注意的是:如果中間的文字不隻一行,并且使用分行顯示的時候，這個就不好用了。

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

使用absolute positioning，需要注意的是這個方法隻能在框有定義好的高度才能工作. 不适合動态高度的框.

假如代碼為:

Hi, I'mVertically 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;}      

本文完~