图片加载中...

图片加载中... 中国高端php培训领导品牌

图片加载中... 申请免费试听机会

首页>新闻动态>WEB前端技术文章

CSS 上下居中的方法总结

更新时间:2020-09-24

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

分享到:

上一篇:vue.js可以用来干什么


下一篇:详解Javascript中document.execCommand()的用法

相关课程MORE>

图片加载中

WEB高级前端+HTML5

前端开发就是利用各种Web技术进行产品的界面开发...

图片加载中

UI交互式设计师

让学生快速达到一名UI界面设计师的标准...

图片加载中

PHP高级架构工程师

广阔的发展空间,需要新型的技术人员...

图片加载中

高级python开发

Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本...

图片加载中TEL:010-83650488

图片加载中

在线咨询

电话咨询