不确定宽高的图片或者视频在一个盒子里的上下左右居中

工作中碰到了不确定长宽的图片，但是要求要在盒子中永远居中，即当图片是宽比高大的时候上下居中，高比宽大的时候左右居中。

---

1. 当图片是个比较宽的图片的时候，我们往往就是以宽为百分比，高度自适应来布局。但是有时候图片是长方形的话，这时候盒子里面就会之显示一部分，那么我们要解决这个问题就得先加上两个属性 ：
   max-width:100%;和max-height:100%;
   这两个属性保证了图片不会撑破盒子。
2. 然后就是让图片上下居中，左右居中，或者上下左右都居中。只需要很简单的步骤：
   1.在父盒子中设置相对定位，position:relative;
3. 然后在图片的样式中加上position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;
4. 这样就大功告成，图片会乖乖的在盒子中间，不管是长方形，正方形，或者小图片。都可以正常的在上下左右居中。