Question

我有一个类似的HTML：

<div class="image-detail">

    <div class="image-detail-image">
        <img src="http://placehold.it/150x150" alt="" />
    </div>
</div>

和它的css一样：

.image-detail{
  height: 500px;
  width: 100%;
  background-color: red;
  text-align: center;
}
.image-detail-image{
  max-height: 100%;
  max-width: 100%;
  vartical-align: center;
}

我希望图像位于div的中心。这是预期的，但只能从左和右。它始终固定在顶部，如果图像很小，底部有间隙。

我希望我的图像位于左右上方的中间相同的中间位置。

Answer 1

如果您想将它放在中间，请尝试object-fit: cover，无论您的div是多大。

Answer 2

使用table属性，您可以实现此目的。

请提供

.image-detail {
  display: table;
}
.image-detail-image {
  vertical-align: middle;
  display: table-cell;
}

这会自动将内部div与父母的中心对齐

＆＃13;

.image-detail {
  height: 500px;
  width: 100%;
  background-color: red;
  text-align: center;
  display: table;
}
.image-detail-image {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<div class="image-detail">

  <div class="image-detail-image">
    <img src="http://placehold.it/150x150" alt="" />
  </div>
</div>

＆＃13;

Answer 3

这是工作的codepen url： http://codepen.io/SESN/pen/vKKeGg

.image-detail{
  height: 500px;
  width: 100%;
  background-color: red;
  text-align: center;
}
.image-detail-image{
  height: 100%;
  width: 100%;
  vertical-align: center;
  border: 1px solid yellow;
  position: relative;
}
.image-detail-image img { display: block; margin-top: -80px; position: absolute; top: 50%; left: 50%; margin-left: -80px; }

Answer 4

＆＃13;

.box {
   background-color: black;
  
}
.wrap {
  background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSOcCMn5EeZRPChrpNh3iY60LXlOd8py9vebNofPp0SK0tHoC6x1w);
  background-repeat: no-repeat;
  background-position: center;
  width: 300px;
  height: 300px;
  border: 1px dashed #eee;
  margin: auto; 
}

＆＃13;

<div class='box'>
   <div class='wrap'>
   </div>
 </div>

＆＃13;

Answer 5

使用display:flex获得预期结果

.image-detail{
  height: 500px;
  width: 100%;
  background-color: red;
  text-align: center;
  
}
.image-detail-image{
  height: 100%;
  width: 100%;
  display:flex;
  background-color:blue;
}
.img{
vertical-align: middle;
  margin:auto;

}

<div class="image-detail">

    <div class="image-detail-image">
        <img src="http://placehold.it/150x150" class="img" alt="" />
    </div>
</div>

Answer 6

TL; DR：使用Flexbox！

根据您需要支持的网络浏览器，您有两种选择。

第一个（也是首选的现代选项）是使用flexbox。 Flexbox在大多数现代浏览器中都提供全面支持：http://caniuse.com/#feat=flexbox

.image-detail {
  display: flex;
  align-items: center; /* This vertically aligns the children elements */
  justify-content: center; /* This horizontally aligns them */
}

第二个选项是使用表格布局，正如@Jinu建议的那样：

.image-detail {
  display: table;
}

.image-detail-image {
  vertical-align: middle;
  display: table-cell;
}

虽然这可以被更多浏览器支持，但它可能会导致一些奇怪的后果（特别是当文本在元素中如何流动时）

html在div中间放置一个图像

6 个答案: