在带有 flexbox 的 "card" 中垂直居中文本块不起作用

Question

我正在制作翻转卡片。

卡片正面显示一张照片，而背面显示一段文本，如果垂直居中放置在卡片上会更好看。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flip_container {
  width: 300px;
  height: 450px;
  border: 1px solid #ccc;
}
.flip_container img {
  width: 100%;
  height: auto;
}
.flip_container:hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.flip_front,
.flip_back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip_front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip_back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flip_back h2 {
  margin-top: 0;
  text-align: center;
}
.flip_back p {
  text-align: justify;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

<div class="flip_container">
  <div class="flip">
    <div class="flip_front">
      <img src="//lorempixel.com/300/450" />
    </div>
    <div class="flip_back">
      <div>
        <h2>Lorem Dummy Title</h2>
        <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most web design projects use Lorem Ipsum excerpts to begin with.</p>          
      </div>
    </div>
  </div>
</div>

我使用 "classic" flexbox 方法将文本块垂直居中，但缺少一些东西。我的问题是：缺少什么？

Answer 1

您忘记了弹性元素不再是块元素，它们不会覆盖其父元素的整个高度。

将 height: 100% 添加到您的 .flip & .flip-back 类 :

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flip_container {
  width: 300px;
  height: 450px;
  border: 1px solid #ccc;
}
.flip_container img {
  width: 100%;
  height: auto;
}
.flip_container:hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
}
.flip_front,
.flip_back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip_front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip_back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.flip_back h2 {
  margin-top: 0;
  text-align: center;
}
.flip_back p {
  text-align: justify;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

<div class="flip_container">
  <div class="flip">
    <div class="flip_front">
      <img src="//lorempixel.com/300/450" />
    </div>
    <div class="flip_back">
      <div>
        <h2>Lorem Dummy Title</h2>
        <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most web design projects use Lorem Ipsum excerpts to begin with.</p>          
      </div>
    </div>
  </div>
</div>

Answer 2

无需为 front div 使用 position:absolute。并使用 align-items:center 和 bottom:0 来 back div 对齐中心。

堆栈片段

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.flip_container {
  width: 300px;
  height: 450px;
  border: 1px solid #ccc;
}

.flip_container img {
  width: 100%;
  height: auto;
}

.flip_container:hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

.flip_front,
.flip_back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip_front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip_back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.flip_back h2 {
  margin-top: 0;
  text-align: center;
}

.flip_back p {
  text-align: justify;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

<div class="flip_container">
  <div class="flip">
    <div class="flip_front">
      <img src="http://via.placeholder.com/300x450" />
    </div>
    <div class="flip_back">
      <div>
        <h2>Lorem Dummy Title</h2>
        <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most web design projects use Lorem Ipsum excerpts to begin with.</p>
      </div>
    </div>
  </div>
</div>

在带有 flexbox 的 "card" 中垂直居中文本块不起作用

Vertically centering a block of text within a "card" with flexbox does not work

html

css

vertical-alignment