垂直居中是一个历史悠久的大问题。 与所有浏览器兼容需要一些时间。 网上有很多解决方案，但我觉得没有比我现在使用的更完美的，至少在我的项目中是这样。 。
在项目中使用垂直居中时，遇到兼容性问题，通常是以下几种情况：
文本垂直居中换行
图像垂直居中
以上都是在固定宽高的容器中垂直居中，否则可以实现margin和padding。
解决垂直居中无非从几个方面入手
列宽等于容器高度
模拟表格单元格特征
定位布局
CSS3 显示：框
结合表格单元格的特点和定位实现换行文本垂直居中
/* 换行文字垂直居中 */
.vc-font1 {
border: 1px solid black;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* 兼容IE6、7 */
*+html .vc-font1 {
height: auto;
min-height: 200px;
}
.vc-font1 .vc-fix {
*position: relative;
*top: 50%;
*left: 50%;
*width: 100%;
}
.vc-font1 .vc-inner {
*position: relative;
*top: -50%;
*left: -50%;
}
换行文字垂直居中，兼容所有浏览器
当文本的高度超过容器时，识别表格单元格的浏览器容器将自行调整。 此时容器的height属性就相当于min-height。 为了在所有浏览器中达到相同的效果，需要修改容器的高度。
缺点：减少冗余标签
借助内联块vertical-align:middle实现
.vc-font2 {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.vc-font2 .vc-inner {
display: inline-block;
vertical-align: middle;
}
.vc-font2 .vc-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
换行文字垂直居中，兼容所有浏览器
vc-inner 和 vc-fix 必须是内联元素。 vc-inner加上vc-fix的长度不能超过容器的长度。 内联块换行时会出现较多间隙（容器font-size: 0可以消除，但这里不适用），所以这两个标签不能换行。
缺点：减少冗余标签（失败），标签不能换行且必须是内联元素。
固定宽度和高度的图像垂直居中
上面提到的换行文字垂直居中方法同样适用于固定宽高图像的垂直居中
借助定位（原理与方法1类似）
.vc-img1 {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
}
.vc-img1 img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
既然图片的宽度和高度已经确定，毫无疑问css3 图片垂直居中，使用这些技术时不会出现兼容性问题
缺点：图像的宽度和高度必须固定，方便估计图像边距的负值。
列宽等于容器高度
.vc-img2 {
border: 1px solid black;
width: 200px;
height: 200px;
line-height: 200px;
_font-size: 200px;
text-align: center;
}
.vc-img2 img {
width: 100px;
height: 100px;
vertical-align: middle;
}
/*hack for ie7 字体要设置多大，自个慢慢调整*/
*+html .vc-img2 {
font-size: 180px;
}
我认为将列宽设置为等于容器的高度就足够了，但我仍然遇到问题。 IE6没买，也没用。 IE7也出问题了，当标签在同一行时就失败了。
对了，这里有一个非常有用的占位图网站，好奇的童鞋请戳链接：）
缺点：这样写我感觉不舒服
图像自适应容器宽度和高度垂直居中
这个方法非常简单。 就是在技巧4的基础上将图片的宽高改为max-width和max-height。代码如下：
.vc-img3 {
border: 1px solid black;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
.vc-img3 img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
/*hack for ie7 字体要设置多大，自个慢慢调整*/
*+html .vc-img3 {
font-size: 180px;
}显然，这样是不兼容IE6的，看来必须要写JS才能兼容IE6。 对此，我只想说，让IE6见鬼去吧！
CSS3 显示：框
最后给出了高端、高档的技术。
.vc-css3 {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: -o-box;
-o-box-align: center;
-o-box-pack: center;
display: -ms-box;
-ms-box-align: center;
-ms-box-pack: center;
display: box;
box-align: center;
box-pack: center;
}
.vc-css3 img {
width: 100px;
height: 100px;
}
想居中就居中，爽啊！
完美吗？ 如果IE能支持的话css3 图片垂直居中，那就是可恶的IE了……
文章转载自《文字和图片水平垂直居中换行的完美解决方案》
发表评论