无法将图像放置在中央

Question

每次单击按钮，图像都会不断变化。现在的问题是我需要使图像居中，以便无论图像大小，图像都停留在中心，并且我已根据高度和宽度对图像进行响应。

目前这是在中间的顶部，我需要在中间。

<section class="col col-2">
  <div class="imagewh">
    <center>
      <img type="image" data-ng-src="{{curIcon}}" ng-click="icon()" 
                       class="responsive" />
    </center>
  </div>
</section>  
.responsive {
  max-width: 100%;
  height: auto;
}    
.imagewh {
  position: relative;
  width: 110px;
  height: 110px;
} 

我正在使用angularjs，找不到解决方案，请帮帮我。

Answer 1

使用flexbox：

.imagewh {
    position: relative;
    width: 110px;
    height: 110px;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
} 

<div class="imagewh">
  <img src="https://cataas.com/cat" width="20" height="20" />
</div>

Answer 2

<img src="paris.jpg" alt="Paris" class="center">

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

这应该居中。

Answer 3

.imagewh{
text-align:center;
width: 110px;
height: 110px;
}
.imagewh img{
position:relative;
top:50%;
transform: translateY(-50%);
}


<div class="imagewh">
   <img type="image" data-ng-src="{{curIcon}}" ng-click="icon()" class="responsive" />
 </div>

请选中此demo。确保为变换属性添加浏览器前缀。

Answer 4

这可以通过使用CSS3的flex，translate或table-cell来实现。

下面是使用翻译的示例

.responsive {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -otransform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.imagewh {
  position: relative;
  width: 110px;
  height: 110px;
  border: 1px solid #ccc;
}

<div class="imagewh">
  <img src="https://cataas.com/cat" width="20" height="20" class="responsive" />
</div>