實現一個不設置寬高的盒子水平垂直居中的效果的方法
方法一、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>
方法三、通過display:table-cell
display:table-cell指讓標簽元素以表格單元格的形式呈現，使元素類似於td標簽。IE8+及現代版本的瀏覽器都支持此屬性，IE6/7不支持（可用其他方法實現類似效果）。同樣，display：table-cell屬性也會被float，position：absolute等屬性破壞效果，應避免同時使用。
vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
<style> .par{ width:200px; height:200px; text-align: center; display:table-cell;; vertical-align: middle; background-color: chartreuse; } .box{ /* vertical-align: middle; */ display:inline-block; } </style> <body> <div class="par"> <div class="box">234</div> </div> </body>