假如有一个固定高度的div，如何让里面的一个图片垂直居中？

2024-08-07 14:04:40   218人阅读

css:

div.warp { display: table-cell; vertical-align: middle; height: 148px; background-color:gray; }

显示效果： http://jsfiddle.net/c4fLL7f7/

这样就实现了垂直居中的效果。但是有几个注意事项：

1. IE6/IE7不支持display:table-cell，算了别管了，反正IE6/IE7也几乎没什么人用。
2. table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。
3. 设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱 脱的一个td标签元素了。

假如有一个固定高度的div，如何让里面的一个图片垂直居中？