html - 使用变换 3d 和位置相对和绝对时居中背景图像

Question

在具有标题、背景图像和一些文本的网页 (Codepen [此处][1]) 上工作。当您单击图像时，它会翻转几次(绕轴旋转)以显示新图像。一段时间以来，我一直在努力定位这张图片。我终于找到了图像位于标题下方和文本上方的位置，旋转有效，并且图像在旋转时保持原位。

问题是我无法将图像居中。我希望图像和页面本身能够响应，因此图像始终位于它所在的走廊的中心。这是我的 HTML 和 CSS(jQuery 在这方面无关紧要):`

<h1>A Tribute to the Doctors of Doctor Who</h1>
  <div id="container">
    <div id="card">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>
<div>
<p>Lorem Ipsum (full paragraph)</p>

#container{
  width: 41vmin;
  height: 60vmin;
  position: relative;
  perspective: 3000px;       
  display: inline-block;
  text-align: center;
}

#card{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .5s;
  transform-origin: center;
}

#card.flipped{
  transform: /*translateY(100%)*/ rotateY(900deg);
}

#card div{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front{
  background-image: url("https://static3.comicvine.com/uploads/original/4/49017/1112141-tardis.jpg");
  background-size: cover;
}

.back{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/c8/3a/ce/c83ace6e2751a862d21d48c59d63a780.jpg");
  background-size: cover;
  transform: rotateY(180deg);
}

h1 {
  text-align: center;
}

div p {
  display: inline-block;
}

我已经尝试过各种各样的事情 - 弄乱边距，在左边和顶部放置，取出并改变绝对位置和相对位置。我发现的一件事是，如果我采取 position: absolute off#card div，图像在旋转时将不会留在原地。

这让我抓狂!帮忙!!!

  [1]: 

http://codepen.io/dtarvin/pen/EmbPqr

Answer 1

只需在 div 容器外添加另一个 div 并放置一个 width:100%;和文本对齐:居中；应该这样做。我添加了 div 和样式。

.outside-container{
  width: 100%;
  text-align: center;
}

<div class="outside-container">
<div id="container">
  <div id="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>
</div>

JSFiddle