关于居中方式（盒子、图片）

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

下面总结两种方式：

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