一个简单的方法是为div和图像创建单独的样式，然后分别放置它们。比方说，如果我想将图像位置设置为50%，那么我将有如下代码....

在{# 位置:绝对的; 宽度:100%; 高度:100%; ｝ # img { 位置:绝对的; 左:50%; 右:50%; ｝ < div id = " / " > <img src="img.png" id="img"> < / div >

试试下面的代码:

<div class="outer">
    <img src="image.png"/>
</div>

和CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

你可以通过使用display:flex CSS属性轻松做到这一点:

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  

一个简单的方法是为div和图像创建单独的样式，然后分别放置它们。比方说，如果我想将图像位置设置为50%，那么我将有如下代码....

在{# 位置:绝对的; 宽度:100%; 高度:100%; ｝ # img { 位置:绝对的; 左:50%; 右:50%; ｝ < div id = " / " > <img src="img.png" id="img"> < / div >

使用自举程序align-items和justification -content。请看下面的例子:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>