Css 集中引导中的图像

我试图将图像（x轴和y轴）集中在bootstrap中的容器中。当我从事非响应性设计时，我会使用以下方法：

.container{display:table-cell; vertical-align:middle; text-align:center; width:500px; height:300px;}
.container img{display:block; margin:auto;}

---

它工作得很好，但是我不能在引导中使用这个方法，因为容器的高度不是恒定的。那么，如何在引导中集中图像呢？

当要居中的对象和/或容器的高度未知时，可以从中使用此技巧。简而言之，我们将引入一个伪元素，如下所示：

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
} 

---

我这里没有太多的信息，但你们可以考虑使用背景图像在两个维度上居中。这可能对你有所帮助。是的，我还可以写一些JS来更新高度。但我想也许有更好的方法。只使用CSS。这可能会有帮助吗@格伦霍兰德：是的，这很有帮助，谢谢！