第四种方法：

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

代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7. #wrapper {
  8.     display: table;
  9. }
  10.  
  11. #cell {
  12.     height: 300px;//如果不设置height，效果并不明显，显示的好像是不居中的，但是实际上在wrapper中是居中显示的
  13.     background-color: yellow;
  14.     display: table-cell;
  15.     vertical-align: middle;
  16. }
  17. .content{
  18.   height: 100px;//加上height是为了显示更明显一些
  19.   background-color: red;
  20. }
  21.   </style>
  22. </head>
  23. <body>
  24.     <div id="wrapper">
  25.       <div id="cell">
  26.         <div class="content">diveeeeeeeeeeeeeeeeeeeeeeeeeeeeeuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuueeeeeeeeeeeee</div>
  27.       </div>
  28.     </div>
  29. </body>
  30. </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. Python去除字符串的空格

    Python能够找出字符串开头和末尾多余的空白. 要确保字符串末尾没有空白,可使用方法rstrip(). 还可以剔除字符串开头的空白,或同时剔除字符串两端的空白. 为此,可分别使用方法lstrip() ...

  2. JQuery小知识点

    //get() : 就是把JQ转成原生JS,可以让通过jquery获得元素使用JS的innerHTML方法. $(function(){ //document.getElementById('div1 ...

  3. PyCharm 的初始设置1

    PyCharm 的初始设置 PyCharm 的官方网站地址是:https://www.jetbrains.com/pycharm/ 01. 恢复 PyCharm 的初始设置 PyCharm 的 配置信 ...

  4. noi2009变换序列

    noi2009变换序列 一.题目 1843 变换序列 2009年NOI全国竞赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解       题目描述  ...

  5. 使用Intellij Idea打开项目不能显示树形目录

    按下列步骤操作:1. 关闭IDEA, 2.然后删除项目文件夹下的.idea文件夹3.重新用IDEA工具打开项目 Open...

  6. 分布式_事务_02_2PC框架raincat源码解析

    一.前言 上一节已经将raincat demo工程运行起来了,这一节来分析下raincat的源码 二.协调者启动过程 主要就是在启动类中通过如下代码来启动 netty nettyService.sta ...

  7. LeetCode OJ：Minimum Path Sum（最小路径和）

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  8. memcache内存分配问题

    Memcached是一个高效的分布式内存cache,了解memcached的内存管理机制,便于我们理解memcached,让我们可以针对我们数据特点进行调优,让其更好的为我所用.这里简单谈一下我对me ...

  9. nodejs读取excel内容批量替换并生成新的html和新excel对照文件

    因为广告投放需要做一批对外投放下载页面,由于没有专门负责填充页面的编辑同学做,只能前端来做了, 拿到excel看了一下,需要生成200多个文件,一下子懵逼了. 这要是来回复制粘贴太low了 正好最新用 ...

  10. pdp 的连接方法

    <?php $dsn = "mysql:host=127.0.0.1;dbname=blog_edu"; try{ $pdo = new PDO($dsn,'root','' ...