关于居中方式(盒子、图片)

经常会遇到一些要求,让盒子或者图片居中显示

下面总结两种方式:

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; //给子盒子设置


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章