如何使用CSS在div内对图像进行居中？

Question

这是我的

<div class="overlay">
  <div id="loading">
    <img src="styles/images/30.gif">
  </div>
</div>

我想让它垂直和水平地居中。

该图像仅为水平居中，如下面的屏幕快照所示：

​

我的CSS如下所示：

.overlay {
   background: #e9e9e9;
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: .5;
}

#loading {
   text-align: center;
}

#loading img {
   display: table-cell;
   margin: 0 auto;
}

我该怎么做才能使它垂直地居中？提前谢谢。

Answer 1

父元素(#loading)的高度是子元素(img)的高度。因为垂直对齐没有意义。设置较大高度的父元素，则内部元素可以通过任何可用的方法垂直居中。

​

* {
  padding: 0;
  margin: 0;
}

.overlay {
  background: #e9e9e9;
  opacity: 0.5;
}

#loading {
  display: flex;
  height: 100vh;
}

#loading img {
  margin: auto;
}

<div class="overlay">
  <div id="loading">
    <img src="http://placehold.it/160x120">
  </div>
</div>

​

Answer 2

有几种方法可以实现垂直对齐，其中许多方法变得复杂。

最简单的修复方法之一是将元素设置为绝对定位，将边距设置为auto，同时将顶部和底部定义为0。

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

链接到jsfiddle。