垂直水平居中

.parent{
　　position：relative；
}

.left{
　　width：200px;
　　height:100%;
}

.right {  
　　margin: auto;  
　　position: absolute;  
　　top: 0; 
　　left: 200px; 
　　bottom: 0; 
　　right: 0;  
}  

 

优点：

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

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

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

4.只用这一个class可实现任何块居中

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

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度。

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

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

 

.parent {
    display: table;
    height:300px;
}

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

优点：

1.      高度可变

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

3.      跨浏览器兼容性好。

4.      支持%。

缺点：

需要额外html标签