CSS垂直居中水平居中方法

Ⅰ.绝对定位居中

#center{
	position:absolute;
	margin: auto;
	width:200px;
	height:200px;
	top: 0;bottom: 0;left: 0;right: 0;
	background-color: #0e3245;
}

刚在别人的博客里看到这种方法时真的觉得很奇葩，以下是大神的解释：

解释：

1、在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。

4、  给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto

5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

这么看来， margin:auto似乎生来就是为绝对居中设计的，所以绝对居中应该都兼容符合标准的现代浏览器。

简而言之：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

优点

1.支持跨浏览器，包括IE8-IE10.

2.无需其他特殊标记，CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起作用。

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

原文地址：http://designshack.net/articles/css/how-to-center-anything-with-css