トランスフォーム3dを使用しているときの背景イメージと、相対、絶対位置のアブストラクト

Question

は、ヘッダー、背景イメージ、およびテキストを含むWebページ（Codepen [here] [1]）で動作します。画像をクリックすると、新しい画像を表示するために数回反転（軸上で回転）します。私はしばらくこの画像の位置を決めて戦ってきました。私は最終的に、イメージがヘッダーの下とテキストの上、回転する作品の上にあり、イメージが回転している間は定位置にとどまるようにします。

問題は画像を中央に配置できないことです。私はイメージが、それは中だ廊下の中央に常にあるので、画像やページ自体が応答するようにしたいここに私のHTMLとCSS（jQueryのはこの1つ上の問題ではありません）です。 `

<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; 
} 

私はマージンをつけて、左と上に置いて、絶対的な位置と親族の位置を取り出して変更するなど、いろいろなことを試しました。私が見つけた1つのことは、ポジションをとると#card divから絶対に離れてしまい、画像が回転してもその位置に留まらないということでした。

これは私をナットにしています！助けて！！！

[1]: 

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

Answer 1

だけのdivコンテナの外に別のdivを追加し、幅入れる：100％; text-align：center;それはそれを行うべきです。私は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