CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)

方法一

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

Content goes here

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

优点：
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)

方法二：

这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

Content goes here

#content {
	position:absolute;
	top:50%;
	height:240px;
	margin-top:-120px; /* negative half of the height */
}

优点：
适用于所有浏览器
不需要嵌套标签

缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

方法三

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

 

Content here

#floater	{float:left; height:50%; margin-bottom:-120px;}
#content	{clear:both; height:240px; position:relative;}

优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)

方法四

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

Content here

#content {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:240px;
	width:70%;
}

优点：
简单

缺点：
IE(IE8 beta)中无效
无足够空间时，content 被截断，但是不会有滚动条出现

方法五

这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

Content here

#content {height:100px; line-height:100px;}

优点：
适用于所有浏览器
无足够空间时不会被截断

缺点：
只对文本有效(块级元素无效)
多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

哪个方法？

我最喜欢的是方法三，缺点不多。因为 content 会清除浮动，所以可以在它上面放置别的元素，并且当窗口缩放时，
居中的 content 不会把另外的元素盖住。看例子。

前言

最近在前端观察看见了这篇老文章，看见了元素居中的5种办法，其中提到了display:table-cell这个css显示的新属性，按照当时的浏览器市场来说想必兼容性会是糟糕的一比，但是现在这坛老酒其实可以用到移动端来。

在PC端，应该很少用到 display:table-cell 这个属性，究其原因在于兼容性【IE8+以及现代浏览器才支持】，或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能，这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的，并且 margin 外边距还达不到 table-cell 的效果。

元素居中

让一个块级元素居中，我们都想到了 margin:0 auto 属性，一般的最外层的布局经常看见这属性，但是这样的居中只是把元素整体居中，元素中的内容依然按照正常流来排列，从左上角到右下角。但是这样并达不到我们需要的效果，我们需要的效果是不管元素里面的内容有多少，还是添加新内容都是垂直居中于元素。

关于垂直居中的办法，用的最多应该 position + margin 负值的办法达到居中的效果

.test{
	height: 400px;
	position: absolute;
	top:50%;
	margin-top: -200px;
	background-color: #ccc;
}

兼容性很好，但是必须先要确定元素的高度，并且假如包含块的高度容不下元素的内容，那么此时就要用 overflow 来处理，假如这个包含块是有背景颜色的，那么就会这样

红色框框中的小渣渣被偷窥地一览无遗，显然这是我们不想看到的，好好的穿着一件裤子，结果裤裆一直处于风口状态，呵呵。

2.float + height +margin负值，代码

#floater	{float:left; height:50%; margin-bottom:-120px;}
#content	{clear:both; height:240px; position:relative;}

还是要知道你的高度，然后折半margin反拉上来。

3.position + margin，利用margin的auto恰好地把上右下左都给填满外边距的办法使其垂直居中，但是IE8-也是不支持的，代码如下

.test {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:240px;
}

这样也可以达到居中的目的，假说说元素没有设置一个显性高度或者本身不是IMG这类拥有自身高度的元素以外是不会垂直居中的，说白了还是给元素一个高度，也达不到自适应垂直居中的目的。所以还是来炒一下老饭，说不定还可以有不一样的味道。

table-cell

先来了解一下这个属性值，display:table-cell 这个属性等同 HTML中的td和th。假如指定，那么该值所在的元素显示效果等同td或者th标签的效果。在HTML中表单元格td和th都是生成一个个矩形框，这些框有内容，有内边距和边框，就是对外边距 margin 不感冒,所以在表格当中设置一个表单元格外边距，其实是起不了作用的，demo→table中td以及元素table-cell设置margin

说到这里，提一下前辈们说的匿名表对象，在table标签中，假如我们只是写如下代码

<table>
	<!-- 其实浏览器会在这里匿名解析出tbody标签出来，如下图 -->
	<tr>
		<td>哈哈哈</td>
		<td>哦哦哦</td>
	</tr>
	<tr>
		<td>嘿嘿嘿</td>
	</tr>
</table>

这个就是所谓的匿名表对象，浏览器在渲染的时候会自动的添加缺失的标签，当然，更加详细的请前往w3c规范文档：匿名表对象

因为设置属性值为 table-cell 的元素本身就具备了td,th的效果，所以假如说在同一个包含块下多个块级元素（如.p标签）使用该属性值，那么这个时候p标签的表象就变成了th也类似 inline-block【IE8+及现代浏览器】 如下代码

css：
.test {
	display: table-cell;
	margin-right: 50px;	/*此margin无效*/
	padding: 10px;
	border: 1px solid #ccc;
}

HTML：
<p class="test">这是第一个p标签</p>
<p class="test">这是第二个p标签</p>
<p class="test">这是第三个p标签</p>

效果：

此时设置外边距 margin 同样不感冒，每一个p标签都是紧挨着并排，并且还可以设置 height 因此，这个属性更加近似 inline-block 属性。正是因为该属性值让元素表现得更像传统表格表格布局，假如是N个相同标签并排，那么就会出现一字排开的效果，so，该属性更适合用在单页面移动端，特别是最近一段时间很火的H5单页场景应用垂直居中效果。

table-cell垂直居中

想要table-cell 垂直居中一个页面，需要几个必要条件：
1.父元素为 display:table ，只有当其父元素，也就是包含块声明是table元素，那么才可以让table-cell的元素纯正地显示为th，td；
2.父元素为显示高度，这点可以通过js判断视窗高度，然后给定一个高度 ；
3.vertical-align:center，table-cell 的元素需要指定垂直居中属性，这样才可以妥妥地垂直居中于页面。

.foo{
	display: table; 
	width: 100%; 
	height: 100%; 
} 
.cell {
	display: table-cell; 
	vertical-align: middle; 
	height: 100%; 
} 

获取窗口高度js

var height = window.innerHeight;
if (typeof height !== "number") {
	function setHeight () {
		document.getElementById('foo').style.height = document.documentElement.clientHeight + "px"
	}		
};
setHeight();

demo→_→ table-cell自适应垂直居中布局，或者拿出手机出来扫一扫

这样就可以让一个块级元素妥妥地居中在页面可视化范围内，不过需要注意一点：

避免跟position同用，因为一个页面不可能就只有一个标题还有描述，有时候比较奇葩的还需要用到定位position ，那么这个时候不能在设置 table-cell 的元素同时运用到 position ，这样是为了避免元素返回原本属性。

解决办法就是新建一个标签，所有的定位都是在新建标签上进行。因为前段用到了一个单页面的滑动框架fullpage，对英文不感冒的东西可以去腾讯员工做的一个中文档的 fullpage
，页面用到了 table-cell 值，并且页面中出现定位元素，踩了坑，所以这算是自己的一个小总结吧。

提一提vertical-align

.test {	
	display: table-cell;
	*display: inline;
	border: 1px solid #ccc;
}
.va-t{vertical-align: top;}
.va-m{vertical-align: middle;}
.va-b{vertical-align: bottom;}
.va-bl{vertical-align: baseline;}
.va-sup{vertical-align: super;}
.va-sub{vertical-align: sub;}
.va-tt{vertical-align: text-top;}
.va-tb{vertical-align: text-bottom;}

刚刚在测试所以的 vertical-align 属性值的时候发现 baseline 跟 sub,super,text-top,text-bottom 表现出来的效果都是一样的【IE8+及现代浏览器】其实也就是默认值。

对于其他三个值
top 表单元格跟其包含块行框顶端对齐;
middle 表单元格内容与其包含块中间对齐;
bottom 表单元格内容与其包含块底端对齐。

结语

好了，暂时就是这么多了，推荐该属性用在移动端的H5单页面转化场景应用上，类似现在微信广告H5广告单页面的滑动效果，假如需求就是做到垂直居的，不妨试试这个 table-cell 属性值。

 

转自 http://www.qianduan.net

原文:http://www.qianduan.net/?p=5654
译自:http://blog.themeforest.net/tutorials/vertical-centering-with-css/