经常会遇到一些要求,让盒子或者图片居中显示
下面总结两种方式:
1.盒子居中
第一种方式:
position:relative; //给父元素设置
position:absolute; //给子元素设置
top:50%;
left:50%;
margin-top:-自身高度/2px;
margin-left:-自身宽度/2px;
第二种方式:
position:relative; //给父元素设置
position:absolute; //给子元素设置
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%); //第一个值,相对于深深宽度的一半,第二个值,相对于自身高度的一半第二种方式更为健壮,推荐第二种。
2.图片居中
第一种方式:
line-height:父盒子的高度; //给父盒子设置
vertical-align:middle; //给图片设置
第二种方式:
display:table; //给父盒子设置
display:table-cell; //给子盒子设置