css问题记录

1. img在div中垂直方向居中？
   这句话通俗来说是让图片的中心放在垂直方向的中心上

<div>
<img src="foo.png"/>
</dvi>
<style>
img{
        position: relative;
        top: 50%;   //高度是50%，此时图片的中心肯定在50%的下面，所以要transform
        transform: translate(0,-50%); //以图片自身的宽度，高度作为参考进行移动，因为高度50%的时候是图片的上部在50%，所以要把图片往上移动图片的50%，这个图片才会居中显示。
        border-radius: 50%;
        width: 10rem;
    }
</style>