使用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. macOS（OS X）安装与配置 Homebrew

    Homebrew 是 macOS 平台的软件包管理器,相当于 Linux 常用的 apt-get,zypper,pacman 等. 安装: 打开终端,逐条执行以下命令 首先需要安装依赖包 Xcode, ...

  2. case when null then 'xx' else 'yy' end 无效

    Sql Server 中使用case when then 判断某字段是否为null,和判断是否为字符或数字时的写法不一样,而且语法能正常执行, 如果不注意数据内容,很容易搞错. 错误方法: CASE ...

  3. python模块之openpyxl介绍

    openpyxl模块是一个读写Excel 2010文档的Python库,如果要处理更早格式的Excel文档,需要用到额外的库,openpyxl是一个比较综合的工具,能够同时读取和修改Excel文档.其 ...

  4. 29-----BBS论坛

    BBS论坛(二十九) 29.帖子详情页布局 (1)front/hooks.py @bp.errorhandler def page_not_found(): return render_templat ...

  5. SpringMVC中的视图和视图解析器

    对于控制器的目标方法,无论其返回值是String.View.ModelMap或是ModelAndView,SpringMVC都会在内部将它们封装为一个ModelAndView对象进行返回.  Spri ...

  6. PlayMaker 对 PlayMakerFSM 里变量的操作

    HutongGames.PlayMaker; //需要引用这个命名空间 红色的字体是对变量的操作,其他的没啥关系. #region 判断为 PlayMakerFSM 组件时 if (behaviour ...

  7. 对象池1（方法功能）PoolOption

    2.对象池PoolOption(方法功能) //单类型缓冲对象管理(单模池操作管理)功能: 激活.收回.预加载等. namespace kernal { [System.Serializable] p ...

  8. pat04-树5. File Transfer (25)

    04-树5. File Transfer (25) 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue We have ...

  9. hash冲突解决和javahash冲突解决

    其实就是四种方法的演变 1.开放定址法 具体就是把数据的标志等的对长度取模 有三种不同的取模 线性探测再散列 给数据的标志加增量,取模 平方探测再散列 给数据的标志平方,取模 随机探测再散列 把数据的 ...

  10. Akka探索第一个例子by fsharp 1

    如何构建一套分布式程序一直是我想知道的问题. Akka就是一套用来开发分布式系统的开发库.当然开发分布式系统只是它的能力之一.除此之外高度抽象的并行运算能力,轻量级的消息系统,容错能力都是该库的特点. ...