水平垂直居中方法总结
一 line-height+vertical-align方法
.parent{
line-height:父元素的height
}
img{
vertical-align:middle;
text-align:center;
}
注:line-height只对文本起作用,对没有文本的行间元素不起作用,vertical-align的作用是使图片与文本垂直居中对齐。
二 display:table的方法
<div class="parent">
<div class="imgwrap">
<img></img>
</div>
</div>
.parent{
display:table;
text-align:center;
}
.imgwrap{
display:table-cell;
vertical-align:middle;
}
三 position定位+margin居中
img{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
四 position定位+translate居中
img{
position:absolute;
top:50%;
left:50%;
transform:tanslate(-50%,-50%);
}
五 position+负margin居中
img{
width:w;
height:h;
position:absolute;
left:50%;
right:50%;
margin-left:-1/2*w;
margin-top:-1/2*h;
}
六 flex垂直居中
.parent{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
注:使用了flex后,clear,vertical-align会失效
方法一只能用于居中行间元素,方法二、三、四、五、六同时可以居中块状元素