使用css实现文本垂直居中，对于支持display: table的浏览器来说，是比较容易实现的，只需要对外层div设置为table，内层div设置为table-cell，并设置文本垂直居中即可。但对于IE6/7，并不支持display:table，只能改用定位的方式来处理。外层div给一个定位，中间层div相对外层绝对定位，top为50%，内层span相对定位，top为-50%，通过正负50%的定位，使内容垂直居中。

相关演示代码（不管怎么改变div1的高度，都可以保证内容垂直居中，内容不限行数）：

<!DOCTYPE HTML>

<html>

<head>

<title>ie中垂直居中</title>

<meta charset=UTF-8">

<style type="text/css">

.div1{

    width:300px;

    position:absolute;

    border:1px solid #000;

    top:100px;

    left:200px;

    display:table;

}

.div2{

    display:table-cell;

    vertical-align:middle;

    *position:absolute;

    *top:50%;

}

span{

    *position:relative;

    *top:-50%;

}

</style>

</head>

<body>

<div class="div1" style="height:200px">

    <div class="div2">

        <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span>

    </div>

</div>

</body>

</html>

css样式设置高度不定文本垂直居中的更多相关文章

  1. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  2. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

  3. TERSUS无代码开发(笔记04)-CSS样式设置

    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...

  4. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  5. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. css样式，媒体查询，垂直居中，js对象

    下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.  

  7. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  8. CSS样式设置

    转载来自:http://www.imooc.com/article/2067水平居中设置-行内元素 水平居中 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align: ...

  9. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

随机推荐

  1. 查看当前linux有多少http连接数

    已采纳 1.查看apache当前并发访问数: #对比httpd.conf中MaxClients的数字差距多少.netstat -an | grep ESTABLISHED | wc -l 2.查看ht ...

  2. Tomcat分析-启动过程

    Server是Tomcat最顶层的容器 Service用于提供服务 Connector用于处理连接相关的事情,并提供Socket与request和response的转换 Container用于封装和管 ...

  3. Problem08 输入数字求和

    题目:求s=a+aa+aaa+aaaa+aa...a 的值,其中a 是一个数字.例如2+22+222+2222+22222(此时共有5 个数相加),几个数相加有键盘控制. 程序分析:关键是计算出每一项 ...

  4. thinkphp Model的使用

    4.1 放在哪儿?项目/模块/Model目录下以本教程为例,Home模块的Model/Home/Model/目录下 4.2 model类文件叫什么?模型名: DemoModel.class.php 4 ...

  5. Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. 001 Two Sum 两个数的和为目标数字

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  7. Android Studio配置及使用OpenCV

      1.下载及目录介绍 进入官网(http://opencv.org/)下载OpenCV4Android并解压(这里是OpenCV-3.2.0-android-sdk).下面是目录的结构图: sdk  ...

  8. 智能时代的到来，企业APP给企业带来的好处

    智能手机的出现给大家带来了巨大的便捷,无论是,文字沟通,购物点餐,开车导航,查看信息,生活服务,上下班打卡,交付各种费用,娱乐生活等都可以在一部小小的手机上来实现.随着智能手机的不断更新,越来越多的软 ...

  9. Golang常用数据结构（对照python）

    python golang init get set extend/update find index size loop list list l := list.New()   l.PushBack ...

  10. 17082 两个有序数序列中找第k小（优先做） O（logn）

    17082 两个有序数序列中找第k小(优先做) 时间限制:1000MS  内存限制:65535K提交次数:0 通过次数:0 题型: 编程题   语言: G++;GCC;VC Description 已 ...