第四种方法：

这个方法把一些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. 智课雅思词汇---二十二、-al即是名词性后缀又是形容词后缀

    智课雅思词汇---二十二.-al即是名词性后缀又是形容词后缀 一.总结 一句话总结: 后缀:-al ②[名词后缀] 1.构成抽象名词,表示行为.状况.事情 refusal 拒绝 proposal 提议 ...

  2. bt种子文件是什么（包括bt文件结构）

    bt种子文件是什么(包括bt文件结构) 一.总结 一句话总结:带特定格式特定信息(资源的url相关信息)的一个字符串(和json有点异曲同工之妙的感觉). 1.bt种子文件和json的区别和联系? 共 ...

  3. js写出斐波那契数列

    斐波那契数列:1.1.2.3.5.8.13.21.34.…… 函数: 使用公式f[n]=f[n-1]+f[n-2],依次递归计算,递归结束条件是f[1]=1,f[2]=1. for循环: 从底层向上运 ...

  4. 存储过程,游标，异常捕捉 try catch 实例代码

    1.存储过程代码.  (数据库是 AdventureWorks) 存储过程用来将错误信息插入到指定的表中. 在别的地方可以调用存储过程插入错误信息(下面部分代码 生成一个表,如果表已经存在就会插入错误 ...

  5. 一位资深php程序员在北京的面试30个题目

    1.SESSION 保存在服务器的哪里?2.服务端是如何获取客户端的cookie?3.如何实现SESSION共享,共享的原理是什么?4.请大致说出LVS搭建的过程,文件共享原理是什么?5.网络共享服务 ...

  6. 深入浅出Mybatis系列（九）---强大的动态SQL(转载)

    原文出处:http://www.cnblogs.com/dongying/p/4092662.html 上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.r ...

  7. 服务器端使用DeferredResult异步推送技术

    注意1: org.springframework.web.context.request.async.DeferredResult; 是Spring4.0以后的版本才有的,注意Spring版本,然后添 ...

  8. PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID

    向mysql 插入数据时,很多时候我们想知道刚刚插入数据的id,这对我们很有用.下面这篇文章就详细给大家介绍了利用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID,有需要的朋友 ...

  9. UVA - 1252 Twenty Questions (状压dp+vis数组加速)

    有n个物品,每个物品有m个特征.随机选择一个物品让你去猜,你每次可以询问一个特征的答案,问在采取最优策略时,最坏情况下需要猜的次数是多少. 设siz[S]为满足特征性质集合S的特征的物品总数,dp[S ...

  10. Linux命令学习（17）：ifconfig命令

    版权声明更新:2017-05-22博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 我们知道,在windows中,除了在图形界 ...