图片在容器内水平垂直居中显示

图片在容器内水平垂直居中显示

效果:

<div class="imgbox">
      <img src="..."/>
</div>

  .imgbox {
    border: 1px solid #dcdfe6;
    position: relative;
    width: 150px;
    height:150px;
    border-radius:4px;
    float: left;
  }
  .imgbox img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
  }

 

posted @ 2020-12-28 15:42  jeffreyu  阅读(130)  评论(0编辑  收藏  举报