CSS实现垂直居中的5种方法
作者：糖伴西红柿 来源：前端观察 发布时间：2009-03-04 12:53:00
标签：垂直居中,方法,css,浏览器
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)
方法一
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
<div id="wrapper"><div id="cell"><div class="content"> Content goes here</div></div></div>
#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}
优点：
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
0
投稿猜你喜欢
- 无聊,写了一个图片后加载的东东,感谢asfman帮忙<!DOCTYPE html PUBLIC "-//W3C//DTD X
今天暴风彬彬要讨论的网站可用 * ，是让你的网站文字链接提高一定的可用性，而且实现起来非常简单，其实这也算是提高用户体验的方法。扩大可点击区- 过滤非法的SQL字符的函数代码:'*************************************************
- 对于任何一个开发项目来说最大的错误可能就是没有计划。最近，有些人认为开始前无需计划，一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后
- 先来说eval的用法，内容比较简单，熟悉的可以跳过。eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执
- 我用的数据库是Access2000的，系统为Win2000 Advance Server.今天在程序调试中遇到了以下几个怪现象：1.如果Ac
- 1.MS SCRIPT ENCODE基本上没什么用了,一段JS就可以破解2.封装成DLL比较可行的方法,有通过VB封装成DLL的例子,而且无
- 使用.net2005自带的SQL-Express连接不上。解决方法：1.网络防火墙阻止数据库连接；2.默认SQL-Express没有启动Sa
- 函数名称:ReplaceHTML参数:@Textstr作用:去掉 @Textstr 内的HTML代码备注:需要给数据库访问者master.s
- 图形由json格式加载，可以灵活配置。下一步是完善用户的操作，做这个感觉还是蛮有意思的。呵呵。截图：部分源码：<script type
- 以前的Sony Ericsson牌DVD影碟机坏掉了，上周到沃尔玛买了个philips的回来，于是又淘了一些DVD回来看。在使用遥控的时候忽
- 问：如何给导入文件加上时间戳标记?答：请参考下文中介绍的两种方法：1.在DOS下从系统获得时间戳利用Dos命令取得时间戳:C:\>ec
- 这几天有一台MySQL数据库服务器出现了频繁的掉线情况，通过排查，并没有排查出哪个网站被攻击，百思不得其解中的时候，群里有个朋友说是因为微软
- 很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模块化
- 网页开发人员常常希望能够了解并掌握多种语言，结果是，学习一门语言的所有内容是棘手的，但是却很容易发现你并没有完全利用那些比较特殊却很有用的标
- ASP（英文全称Active Server Pages）是一个编程环境，在其中，可以混合使用HTML、脚本语言以及组件来创建服务器端功能强大
- 有过相关经验的朋友都知道，Jscript的效率毕竟有限，在数组中查找数据时如果用常规的算法来做执行起来会很慢。例如在一个含500个字符串的d
- 测试：IE6、IE7、FF3.014突发奇想的效果，主要突出构思，效果还比较粗糙，好好创意一下，应该可以引申出一些比较有新意的图片切换效果。
- 经过漫长的等待，近日，微软终于发布了Silverlight 2正式版的发布不仅让微软有了更多和Flash叫板的机会，同时也将RIA(Rich
- 1.触发器概述触发器是SQL Server数据库应用中一个重要工具，是一种特殊类型的存储过程，应用非常广泛。一般存储过程主要通过存储过程名而
