3种实现CSS 上下居中的方法
第一种,上下居中文字:
方法是使用line-height,因为line-height就是用来定义文字行与行之间的距离,所以定义文字框的line-height等于框的高度可以让文字上下居中.
h1 {
font-size: 3em;
height: 100px;
}
需要注意的是:如果中间的文字不只一行,并且使用分行显示的时候,这个就不好用了。
第二种,非文字的上下居中:
使用absolute positioning,需要注意的是这个方法只能在框有定义好的高度才能工作. 不适合动态高度的框.
假如代码为:
Hi, I'mVertically AlignedAbigo 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;
}
本文完~