CSS垂直水平居中总结

css实现垂直水平居中的方法多种，各种方法各有优劣，查阅网上资料，自己总结于此，方便日后应用。

1. 绝对定位居中

.box {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		overflow: auto;
		width: 50%;
		height: 50%;
		margin: auto;
	}

原本认为margin只能实现水平居中，但是在大牛的文章中发现了这种垂直水平居中，异常的好用。

优点：

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

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

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

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

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

6. 内容块可以被重绘

7. 完美支持图片居中

缺点：

1. 必须声明高度

2. 建议设置overflow:auto来防止内容越界溢出

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

2. 负外边距居中

块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半，再加上top: 50%; left: 50%;

.box{
		position: absolute;
		top: 50%; left: 50%;
		width: 200px;
		height: 200px;
		padding: 60px;
		margin-left: -130px;
		margin-top: -130px;
	}

优点：

1. 兼容IE6，7

缺点：

1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。

2. 内容可能溢出容器。

3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

3. Transforms居中

.box{
		position: absolute;
		top: 50%; left: 50%;
		width: 50%;
		margin: 0 auto;
		-webkit-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
			    transform: translate(-50%,-50%);
	}

优点：

1. 内容可变高度

缺点：

1. IE8不支持

2. 属性需要写浏览器厂商前缀

3. 可能干扰其他transform效果

4. 某些情形下会出现文本或元素边界渲染模糊的现象

4. Table-Cell居中

非常不错的居中方式

HTML

<div class="container">
	<div class="box">
		<div class="centent">
			
		</div>
	</div>
</div>

CSS

.container {
		display: table;
		width: 500px;
		height: 500px;
	}

	.box {
		display: table-cell;
		vertical-align: middle;
	}

	.centent {
		width: 50%;
		margin: 0 auto;
	}

优点：

1. 高度可变

2. 内容溢出会将父元素撑开

3. 跨浏览器兼容性好

缺点：

1. 需要额外html标记

5. Flex居中

.container {
    	display: flex;
        flex-direction: column; /* 改变排列方向 */
    	justify-content: center;
    	align-items: center;
    }

优点：

1. 内容块的宽高任意，优雅的溢出

2. 可用于更复杂高级的布局技术中

缺点：

1. IE8/IE9不支持。

2. Body需要特定的容器和CSS样式。

3. 运行于现代浏览器上的代码需要浏览器厂商前缀。

4. 表现上可能会有一些问题