标签：har block img vertica 元素 ali url 定义 use
实现一个不设置宽高的盒子水平垂直居中的效果的方法
方法一、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>
标签：har block img vertica 元素 ali url 定义 use
原文地址：https://www.cnblogs.com/starwei/p/12459706.html
