实现一个不设置宽高的盒子水平垂直居中的效果的方法
方法一、CSS+定位
让其父元素相对定位，内部元素绝对定位，这里的父元素为body。
原理：让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应。可以想象成一个盒子，给了四个方向的相同的力，这样就会形成一种相对的均衡力量让其停留在中间位置了。
<style> img{ position:absolute; top:0; bottom:0; left:0; right:0; margin: auto ; } </style> <body> <img src="img/20181008095016_59996.jpg" alt=""> </body>
方法二、
通过设置内部元素绝对定位，给一个translate属性，让其在x轴和y轴进行平移。原理跟方法一相似。
<style> .ided{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* X负数向左平移 Y轴负数往上平移 */ background-color: burlywood; width:200px; height:200px; } </style> </head> <body> <div class="ided"> </div> </body> </html>