第四种方法：

这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的vartial-align属性。

代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

#wrapper {

    display: table;

}

#cell {

    height: 300px;//如果不设置height，效果并不明显，显示的好像是不居中的，但是实际上在wrapper中是居中显示的

    background-color: yellow;

    display: table-cell;

    vertical-align: middle;

}

.content{

  height: 100px;//加上height是为了显示更明显一些

  background-color: red;

}

  </style>

</head>

<body>

    <div id="wrapper">

      <div id="cell">

        <div class="content">diveeeeeeeeeeeeeeeeeeeeeeeeeeeeeuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuueeeeeeeeeeeee</div>

      </div>

    </div>

</body>

</html>

优点：

  • content可以动态改变高度。当wrapper里没有足够空间时，content不会被截断

缺点：

  • Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签

显示效果如下：

css垂直居中方法（二）的更多相关文章

  1. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  4. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  5. css垂直居中方法总结

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...

  6. css垂直居中方法（四）

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  7. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  8. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  9. css垂直居中方法（一）

    第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...

随机推荐

  1. OpenStack企业私有云新需求（1）：Nova 虚机支持 GPU

    作者:Sammy Liu 刘世民 本系列会介绍OpenStack 企业私有云的几个需求: GPU 支持 自动扩展(Auto-scaling)支持 混合云(Hybrid cloud)支持 物理机(Bar ...

  2. 【转】ORACLE的数据类型

    原文;http://linjian004.bokee.com/3916067.html 常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 ...

  3. 使用hibernate读取hibernate.cfg.xml文件时碰到这个错误org.hibernate.internal.util.config.ConfigurationException: Could not locate cfg.xml resource [/HibernateTest/src/hibernate.cfg.xml]

    我的问题在于把hibernate.cfg.xml文件放置在某个包中了,hibernate.cfg.xml文件需要放置在src目录下.

  4. PyCharm 的升级、设置快捷方式

    05. PyCharm 的升级以及其他 PyCharm 提供了对 学生和教师免费使用的版本 教育版下载地址:https://www.jetbrains.com/pycharm-edu/download ...

  5. NodeJS入门学习

    node.js 概念:是一个由c++编写的,本质上是一个javascript的运行环境,他可以让js代码运行在服务器端. node可以解析JS代码(没有浏览器安全级的限制) 提供系统级别的API: 1 ...

  6. hzau 1200 Choosy in Food

    1200: Choosy in Food Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 32  Solved: 5[Submit][Status][W ...

  7. java之 Timer 类的简单使用案例

              (如果您看到本文章务必看结尾!) 第一次用Timer类,记录一下个人理解. 场景:做苹果内容结果验证时,根据苹果支付凭证去苹果官方服务器验证是否支付成功.但因为苹果服务器比较慢,第 ...

  8. DECLARE_MESSAGE_MAP用法

    DECLARE_MESSAGE_MAP( ) 说明:  你的程序中的每一个CCmdTarget的派生类都可以提供一个消息映射以处理消息.在你的类声明的末尾使用DECLARE_MESSAGE_MAP宏. ...

  9. 机器学习（六）— logistic回归

    最近一直在看机器学习相关的算法,今天学习logistic回归,在对算法进行了简单分析编程实现之后,通过实例进行验证. 一 logistic概述 个人理解的回归就是发现变量之间的关系,也就是求回归系数, ...

  10. UVA - 1603 Square Destroyer (DLX可重复覆盖+IDA*)

    题目链接 给你一个n*n的由火柴组成的正方形网格,从中预先拿掉一些火柴,问至少还需要拿掉多少火柴才能破坏掉所有的正方形. 看到这道题,我第一反应就是——把每根火柴和它能破坏掉的正方形连边,不就是个裸的 ...