垂直居中的几种实现方法

标签: 自适应 垂直居中 CSS 相关 | 发表时间:2011-10-10 15:26 | 作者:sofish Charles
出处:http://sofish.de

用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:

一、利用 position 和负边距

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

垂直居中

/* 代码实现:
 * 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
 */
.selector {
     position:absolute;top:50%;。
     margin-top:-元素自身高度的一半;
}

 二、使用 <table />

<table /> 真是各种好用,她是各种布局、居中的法宝。垂直居中对其来说,也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码:

td{ vertical-align:middle; }

三、通用解决方案

使用第一方案的问题是,通常我们需要垂直居中的元素高度都是不确实的。这里我们需要用 JS 来实现高度的计算,再实现负边;而第二种方案的局限在于只应用于 <table />。其实是,我们可能综合这两种方法,来做一个 Hack。

像我们知道的,在 CSS2.1 中,任何元素都可以使用 display:table / display:table-cell来实现与 table 一样的功能。那么,只要支持 display:table 的浏览器,已经可以轻松解决,只要这样写代码:

<!-- DOM 结构 -->
<div>
    <p>content</p>
</div>

/* CSS 实现 */
div { display:table; }
p{ display:table-cell; vertical-align:middle; }

但问题是,这种方法在 IE6/7 是不能实现的,因为他们不支持 display:table 这个特性。那有没有办法不计算高度,利用第一种方案来实现垂直居中呢?其实也未尝不可。看看下面这个 DOM 结构和图示:

<div class="wrap">
    <div class="hack">
        <div class="cnt">
            content
        </div>
    </div>
</div>

垂直居中

其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。这里有一个 DEMO:

垂直居中最终方案: DEMO

/* CSS 部分的代码实现:整体代码参见上述 demo*/
.wrap{
    width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
    *position:relative;
}
.hack{
    display:table-cell;vertical-align:middle;
    *position:absolute;*top:50%;
}
.cnt{
    *position:relative;*top:-50%;
}

这是在支付宝通用解决方案中实现的一个方案。=_,=  欢迎提供更好的方案…


© 2011 幸福收藏夹。 版权所有,转载务必注明。域名已经更新为:sofish.de
注意:当你觉得某篇文章有用,请直接看原文,因为通常我都会在写了文章后更新、去错别字、升级观点之类的。

相关 [垂直 方法] 推荐:

垂直居中的几种实现方法

- Charles - 幸福收藏夹
用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了. 因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全). 今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:. 一、利用 position 和负边距.

垂直网站二次崛起

- redhobor - 《商业价值》杂志
得益于社交网络、电子商务和移动互联浪潮对互联网基础架构进行的升级,垂直网站从当初的细分领域信息提供者,变成线上与线下商务对接的最佳通道. 历史已经迎来了垂直网站再次崛起的时代. 当地时间7月23日,Facebook投资人、投资公司Elevation Partners合伙人罗杰·迈克奈米(Roger McNamee)在接受媒体采访时语出惊人:社交网络的机会已经“完结”.

垂直互联网的思考

- coofucoo - 月光博客
  电商平台型企业征战十年,争的是广度、用户、价格. 而征战的结果是大鱼挤兑小鱼,小鱼连挤兑虾米的资格都没有,因为互联网太透明,用户的变数性太大,平台与平台之间的同质化严重,差异化小,所以,笔者认为平台之争的结果实际上就是价格战之争,拼谁更有拿钱和烧钱的本事.   而对于垂直细分类品牌,笔者认为他是未来电子商务发展的热点、重点、盈利点.

再谈垂直和水平切分

- - 人月神话的BLOG
本篇为在应用集中化背景下,数据库集群本身的垂直和水平切分方法的点滴思考. 首先我们看应用的垂直切分,应用本身包括了两大类型的应用,一种是以核心数据为中心的应用,一种是以纯粹的流程工单为核心的应用. 前者如资产管理,主数据管理等相关应用;后者如运维工单管理,OA办公管理等应用. 对于工单型应用各种工单流程之间相互耦合性非常底,共享的基础数据也相当少,因此这类应用相当容易进行垂直切分,而且切分的也相当干净;而对于资产管理这类应用,.

社区,创意,产品:垂直电商 Quirky 不走寻常路

- MooM - 爱范儿 · Beats of Bits
Quirky 成立于2009年3月,是一家创意产品社区与电子商务网站,专注于创意产品细分市场(厨卫小工具、数码设备配件、儿童玩具、运动与旅行辅助装备等). 它最大的特点是,在 Quirky 里的所有商品都是由 Quirky 社区参与开发的. 用户可以在网站上提交他们的产品创意,里面包括产品的描述、理念等.

SpaceX展示未来的垂直着陆火箭

- 微笑!?~ - Solidot
私人太空公司SpaceX的CEO Elon Musk上月底在美国新闻俱乐部上讨论了未来的载人飞行(C-Span视频),他用一个令人惊叹的CG视频(MP4)演示了火箭和飞船的可复用性. 在视频中,SpaceX展示了可能只存在于科学幻想中的未来整体可复用火箭和飞船,火箭的第一级和第二级脱离飞船,重返大气层,然后在这一过程中利用自身动力抵消地球引力,以垂直方式着陆,飞船在完成任务返回地球后同样以垂直方式而不是使用降落伞着陆.

deviantART:1400万独立艺术家的垂直SNS

- 彭全兵 - 互联网的那点事...
没有他的PSP2游戏机,安吉洛·索蒂拉(Angelo Sotira)就像一个坐立不安、手足无措的孩子. 他单薄、衣着时尚但不修边幅,一条True Religion高端牛仔热裤,配上一件带有碎洞的牛仔衣,让他看起来很有艺术气质,并且远比他30岁的实际年龄年轻得多. 在谈到他所开创的这个全球最早、最大的社交网络时,他激情四射,说到激动处会在沙发前来来回回地走动;有时也会将双腿跷到咖啡桌上或者斜靠着它轻松地回忆或畅想——这足见他不是一个循规蹈矩的人.

商业价值:垂直网站二次崛起

- Yiding - GeekPark 捕风捉影
得益于社交网络、电子商务和移动互联浪潮对互联网基础架构进行的升级,垂直网站从当初的细分领域信息提供者,变成线上与线下商务对接的最佳通道. 历史已经迎来了垂直网站再次崛起的时代. 当地时间7月23日,Facebook投资人、投资公司Elevation Partners合伙人罗杰·迈克奈米(Roger McNamee)在接受媒体采访时语出惊人:社交网络的机会已经“完结”.

我要投诉:垂直的投诉类点评移动应用

- - 动点科技-独立原创科技博客
我要投诉是一个专门面向消费者的,用来发布和查看商家投诉的移动应用. 主要功能有两个:一是发布投诉,需用新浪微博登录后发布,可以手动查找商家,或直接查看附近商家. 发布投诉的形式包括文字、语音、图片. 默认发布之后,该信息会同步在我要投诉的官方微博,以通过社会化网络进行传播,扩大影响;. 二是投诉查看,可以按照周边、排行榜、最新和最搞投诉四类来查看.