块级元素垂直居中的方法
发表于 2015-12-11
元素垂直居中的方法
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。以下为本人尝试让块级元素垂直居中的方法：
通过display转化让块级元素垂直居中方法
一、直接设置line-height高度为parent高度，将子元素转换为为inline-block
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
height: 200px;
line-height: 200px;
}
.parent img {
display: inline-block;
vertical-align: middle;
}
二、将父级设置为display: table-cell，然后通过vertical-aligh: middle使元素垂直居中
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
height: 200px;
display: table-cell;
vertical-align: middle;
}
.parent img{
display: block;
*display: inline-block; //低版本 IE fix bug
}
通过position定位让块级垂直居中方法
一、已知图片或块级元素高度，通过定位top值为50%，然后通过定图片或块级元素高度一半的margin-top负值进行偏移
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
position: relative;
height: 200px;
}
.parent img {
display: block;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
二、未知图片或块级元素高度，通过定位top值为50%，然后通过css3 transform的translateY负50%进行偏移
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
position: relative;
height: 200px;
}
.parent img {
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
}
三、未知图片或块级元素高度，通过margin:auto实现绝对定位元素的水平垂直居中
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
height: 200px;
position: relative;
}
.parent img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
四、未知图片或块级元素高度，通过js进行定位，以下代码使用jquery
HTML
<div class="parent">
<img src="image.png" alt="" />
</div>
CSS
.parent {
position: relative;
height: 200px;
}
.parent img {
display: block;
position: absolute;
}
js
$(".parent img").css({top: ($(".parent").height() - $(".parent img").height())/2 + 'px'});
有兴趣还可以仔细阅读 张鑫旭的个人博客
