如何將div的內容在其中垂直或水平居中？

Question

我有一個投資組合類型3列式布局。 每個投資組合項目都是一個div，其中包含項目名稱和簡短說明。 首先顯示項目名稱，當我將鼠標懸停在div上時，div翻轉，然后顯示摘要。

當我將鼠標懸停在div上時，摘要從左上方溢出。 我希望項目名稱和摘要都放在div的無效位置。 以下是代碼段代碼。

 .flip-container { perspective: 1000; margin-right: 30px; background-color: red; margin-bottom: 20px; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 360px; height: 320px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; text-align: center; /*top: 0; left: 0;*/ } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } 

 <div class="row"> <div class="flip-container col-md-4 portfolio-item" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <h3> <a href="#">Project Name</a> </h3> </div> <div class="back"> <!-- back content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="flip-container col-md-4 portfolio-item" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <h3> <a href="#">Project Name</a> </h3> </div> <div class="back"> <!-- back content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> 

Answer 1

您可以為此使用flexbox 。 將以下樣式添加到.front和.back div中

CSS：

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

這是工作中的小提琴 。

Answer 2

我已經創建了一個解決方案，但是它需要指定錨標記的高度和寬度。

 .flip-container { perspective: 1000; margin-right: 30px; background-color: red; margin-bottom: 20px; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 360px; height: 320px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; text-align: center; /*top: 0; left: 0;*/ } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); position: relative; } .front h3 { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: 20px; width: 60px; } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } 

 <div class="row"> <div class="flip-container col-md-4 portfolio-item" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <h3> <a href="#">Project Name</a> </h3> </div> <div class="back"> <!-- back content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="flip-container col-md-4 portfolio-item" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> <h3> <a href="#">Project Name</a> </h3> </div> <div class="back"> <!-- back content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div>