web前端CSS上下居中的方法總結(jié)

CSS上下居中的方法總結(jié)

一種,上下居中文字:

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

h1{

font-size:3em;

height:100px;

;

}

需要注意的是:如果中間的文字不只一行,并且使用分行顯示的時(shí)候，這個(gè)就不好用了.

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

使用absolute positioning，需要注意的是這個(gè)方法只能在框有定義好的高度才能工作.不適合動(dòng)態(tài)高度的框.

假如代碼為:

Hi,I'mVertically Aligned

Abigo sudo marapaulatim odio,accumsan luptatum nibh nibh refero metuo opes ut fatua.

要上下居中CSS編寫為:

.vert{

width:580px;

height:190px;

position:absolute;

top:50%;

left:50%;

margin:-95px00-290px;

}

上邊的margin計(jì)算公式為:

*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;}