3種實(shí)現(xiàn)CSS 上下居中的方法
來(lái)源 |?https://www.liqingbo.cn/blog-189.html
第一種,上下居中文字:
方法是使用line-height,因?yàn)閘ine-height就是用來(lái)定義文字行與行之間的距離,所以定義文字框的line-height等于框的高度可以讓文字上下居中.
h1 {: 3em;height: 100px;}
需要注意的是:如果中間的文字不只一行,并且使用分行顯示的時(shí)候，這個(gè)就不好用了。
第二種,非文字的上下居中:
使用absolute positioning，需要注意的是這個(gè)方法只能在框有定義好的高度才能工作. 不適合動(dòng)態(tài)高度的框.
假如代碼為:
I'mVertically AlignedAbigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.
要上下居中 CSS編寫(xiě)為:
.vert?{width: 580px;height: 190px;position: absolute;top: 50%;left: 50%;margin: -95px 0 0 -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;}
本文完~
評(píng)論
圖片
表情