css垂直居中方法（二）
第四种方法：
这个方法把一些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垂直居中方法（二）的更多相关文章
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- [css] 垂直居中方法
原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...
- css垂直居中方法总结
在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...
- css垂直居中方法（四）
第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- css 垂直居中方法汇总
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...
- css垂直居中方法（一）
第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...
随机推荐
- ZC_知识点
1. 在创建一个JNI动态库的工程时应该将工程的输出目标设置为动态连接库(Windows下为.dll,Unix-like系统下为.so,OS X下为.dylib) 2.类型对应关系 (Java与C/C ...
- javascript ArrayBuffer类型化数组和视图的操作
个人理解类型化数据就是内存分配区域,不同数据的存储就是视图DataView咯 var buffers = []; var json = {"id":100, "name& ...
- 06-THREE.JS 给所有物体相同的材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- Windows7+VS2008 下编译Subversion 1.8.3
一.需要的软件包 1.python-2.7.5.msi http://www.python.org/ 2.ActivePerl-5.8.8.822-MSWin32-x86-280952.msi h ...
- db2还原离线备份文件报错SQL2071N 提示“访问共享库出现错误”解决
db2 buffers buffer 提示报错: SQL2071N An error occurred while accessing the shared library “/home/db2a ...
- unity 四元数, 两行等价的代码
Vector3 tmpvc; 1. tmpvc = Quaternion.Euler (new Vector3 (0, 30, 0)) * new Vector3 (0, 0, 1); 2. tmpv ...
- poj2411 Mondriaan's Dream[简单状压dp]
$11*11$格子板上铺$1*2$地砖方案.以前做过?权当复习算了,毕竟以前学都是浅尝辄止的..常规题,注意两个条件:上一行铺竖着的则这一行同一位一定要铺上竖的,这一行单独铺横的要求枚举集合中出现连续 ...
- VC 6.0下载 VC 6.0英文版下载 Visual C++ 6.0 英文企业版 集成SP6完美版（最新更新地址，百度网盘）
下载地址1:Visual.C++.6.EN 下载地址2:Visual.C++.6.EN 更新下载地址可用(百度网盘)Visual.C++.6.EN 转载请注明出处,有技术问题,欢迎互相交流,或者留言.
- 五、Jmeter--关联（正则表达式）
一.什么时候需要关联? 1. 服务器返回的动态变化而且对业务有影响的需要关联. 2. 回放脚本看是否正确,检查下脚本,是否有动态数据影响 3. 一大串字符串,每次请求参数是否有变化 4. 可以找开发问 ...
- WPF案例：如何设计搜索框（自定义控件的原则和方法）
我们平时自定义WPF控件的方法有:Style,DataTemplate,ControlTemplate, DependencyProperty, CustomControl等几个方法. 按照优先顺序应 ...