第四种方法：

这个方法把一些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. js简单工厂

    我以计算器为例写一个简单工厂模式,只完成加减乘除4个计算功能,考虑到其他功能方便日后扩展,遵循开放-封闭原则. 简单工厂类图: 先看一下C#的简单工厂是如何实现的: 定义抽象类Operation,加减 ...

  2. 本地磁盘文件夹共享到虚拟机上的linux系统中

    1. 将本地的一个文件夹设置为共享文件 2.点击 虚拟机菜单中的  虚拟机->设置->选项->共享文件夹->总是启用->添加(将上一步骤设置的共享文件夹添加到里面) 3. ...

  3. php特级课---3、常用的网站加速技术有哪些

    php特级课---3.常用的网站加速技术有哪些 一.总结 一句话总结:网站加速技术是一组技术的组合,来提升网站的速度 1.Squid代理缓存技术 2.页面静态化缓存 3.Memcache 4.Sphi ...

  4. jsp:forEach标签

    该标签使用来对一个 Collection 集合中的一系列对象进行迭代输出,并且可以指定迭代次数.一般使用格式如下: <c:forEach items=”collection” var=”varN ...

  5. spring: 使用Spring提供的JDBC模板(使用profiles选择数据源/使用基于JDBC驱动的数据源)

    Spring提供的JDBC框架负责管理资源和异常处理,从而可以简化开发者的JDBC代码.开发者只需要编写写入和读取数据库相关的代码即可. 正如在之前的小节中论述过的,Spring将数据库访问过程中的模 ...

  6. file.seek()方法引出的文本文件和二进制文件问题

    问题的起因 菜鸟教程上有一段关于file.seek()方法的讲解,先简短描述一下seek()方法: seek(offset, whence)方法用于移动文件读取指针到指定位置 参数offset--开始 ...

  7. Xcode 离线文档 下载

    从下面这个xml中可获取下载地址: https://developer.apple.com/library/downloads/docset-index.dvtdownloadableindex 最后 ...

  8. tableau学习笔记—1

    第一部分 第一章 数据可视化 1.1 用数据讲故事 1.2 数据不只是数字 1.3 在数据中寻找什么(关系.模式.异常) 第二章 Tableau概述 2.1 Tableau概述 2.2 产品简介 第三 ...

  9. [HihoCoder1413]Rikka with String

    vjudge 题意 给你一个串,问你把每个位置的字符替换成#后串中有多少本质不同的子串. \(n\le 3*10^5\) sol 首先可以计算出原串里面有多少本质不同的子串.显然就是\(\sum_{i ...

  10. 获取url参数并且中文不乱码的方法

    function getUrlArgument(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...