html - 如何将字母居中放置在圆圈中间以创建一种抽认卡效果？

Question

我试图将字母居中放置在我创建的每个圆圈的中间，这样我就可以做出一种抽认卡效果。我需要它永久居中，以便文本可以更改并仍然位于中心。这是我的代码。在 CodePen 上.

HTML

<div id="cover">
  <div class="red-box">
    <h1 id="red"> 뚱뚱한 고양이 </h1> 
  </div> 
  <div class="blue-box"> 
    똑똑한 고양이
  </div> 
</div> 

CSS

#cover {
  position:absolute; 
  float: left;
  width: 100%;
  height:100%;
  padding: 0em;
  margin: 0em; 
  border: 1em solid black;
  background:#dae0ed;
}
.red-box {
  background:#ef6258;
  width:50%;
  height: 50%;
  float:right;
  border-radius:50%;
  border:.1em solid black;
  box-shadow: .03em .03em 03em 0em #424447;
}
.blue-box {
  background:#6994ea;
  width:50%;
  height: 50%; 
  float:right;
  border-radius:50%;
  border:.1em solid black;
  box-shadow: .03em .03em 03em 0em #424447;
}
.green-box {
  background:#91c1a6;
  width:50%;
  height: 50%;
  float:right;
  border-radius:50%;
  border:.1em solid black;
  box-shadow: .03em .03em 03em 0em #424447;
}
.brown-box {
  background:#af8960;
  width: 50%;
  height: 50%;
  float:right;
  border-radius:50%;
  border:.1em solid black;
  box-shadow: .03em .03em 03em 0em #424447;
}
h1 {
  font-family: Comic Sans MS;
  margin:0;
  text-align: center; 
  vertical-align: middle; 
  text-shadow: .03em .03em grey;
 }

Answer 1

让您的盒子完美居中显示内容的一种简单方法是将它们变成 flex 盒子。尝试将 .box 类添加到所有框并使用此标记:

.box {
    display:flex;
    justify-content:center;
    align-items:center;
}

这里是 an updated codepen 的链接.

您可以阅读有关使用 flexbox 的更多信息 here .