html - 如何居中这个翻转卡片示例？

Question

我已经尝试了很多东西，并进行了大量搜索以在此处和网站上找到示例，例如 https://css-tricks.com/centering-css-complete-guide/ 但我运气不好。

我发现了一个 fiddle ，其中有人创建了一个翻转卡片 div，所以我觉得很酷，让我在我的网站上尝试一下。来源:http://jsfiddle.net/uxable/YHeKX/

这是我的 HTML 的样子:

<section id="test" class="section">

        <div class="row" id="top-section">
            <div class="col-lg-12">
                <h1>Our Pics</h1>
                <p>Check it out!</p>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

                <div class="col-lg-4 col-sm-12">
                    <div class="flip"> 
                        <div class="card"> 
                        <div class="face front">Front</div> 
                        <div class="face back">Back</div> 
                    </div> 
                    </div>
                </div>

            </div>
    </div>
</section>

这是 CSS:

.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 100%;
   height: 300px;
   position: relative;
   margin: 50px auto;

}
.flip .card.flipped {
  transform:rotatex(180deg);
  -ms-transform:rotatex(180deg); /* IE 9 */
  -moz-transform:rotatex(180deg); /* Firefox */
  -webkit-transform:rotatex(180deg); /* Safari and Chrome */
  -o-transform:rotatex(180deg); /* Opera */
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */

}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;

}
.flip .card .back {
    background: blue;
    background: white;
    color: black;
    cursor: pointer;

  transform:rotatex(-180deg);
  -ms-transform:rotatex(-180deg); /* IE 9 */
  -moz-transform:rotatex(-180deg); /* Firefox */
  -webkit-transform:rotatex(-180deg); /* Safari and Chrome */
  -o-transform:rotatex(-180deg); /* Opera */

}

问题是，如果我将一段文字放在卡片上，我无法将其居中。它保持在顶部。我怎样才能在没有太多痛苦的情况下将其居中？

Answer 1

尽管表格很糟糕，但它们是垂直居中的一种简单方法。请参阅更新的 fiddle with table 以包含在翻转卡内垂直居中的多行文本:

http://jsfiddle.net/6nhczmnx/

/* card flip */
$(".flip").hover(function(){
  $(this).find(".card").toggleClass("flipped");
  return false;
});

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 400px;
   height: 200px;
   position: relative;
   margin: 50px auto;
}
.flip .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  font-family: Georgia;
  font-size: 1.4em;
  text-align: center;
  line-height: 1.5em;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */

}
.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}
.flip .card .back {
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
    
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */

}

/* Additional new CSS added below */
.flip .card .face {
  overflow: auto;
}
.flip .card .face table {
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip"> 
  <div class="card"> 
      <div class="face front">
          <table>
              <tr>
                  <td><h3>Scrollable Text</h3>
                    Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text</td>
              </tr>
          </table>
      </div> 
    <div class="face back">
      <table>
          <tr>
              <td align="left"><p style="text-align:center;">V-centred if contained</p>
               Back text Back text Back text Back text Back text</td>
          </tr>
      </table>
    </div> 
  </div> 
</div>