How to center the letters into the middle of a circle to create a sort of flashcard effect?

Question

I am trying to center the letters into the middle of each circle I created, so that I can make a sort of flashcard effect. I need it to be permanently centered so that the text can change and still be in the center. Here is the code I have. It's on 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

An easy way to have your boxes display content perfectly centered is to turn them into flex boxes. Try adding a class of .box to all of your boxes and using this markup:

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

Here is a link to an updated codepen .

You can read more about using flexbox here .

Answer 2

The flex-box example will work well with browsers that support it. If you need to support browsers that don't support flex-box, I would use this solution:

HTML:

<div class="circle">
  <div class="contents">
     <div>Text here</div>
  </div>
</div>

CSS:

.circle {
  position: relative;
  display: table;
  width: 300px;
  height: 300px;
  background: red;
  border-radius: 50%;
}

.circle > .contents {
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circle > .contents > div {
  display: inline-block;
}

Note: The solution I have shown here will require an extra element. That's why I didn't modify your existing code. Also, you had the vertical align property in your example/jsfiddle. Vertical align property only works with tables.

Answer 3

you can use position absolute combined with transform:

.red-box {
  position: relative;
  background:#ef6258;
  width:50%;
  height: 50%;
  float:right;
  border-radius:50%;
  border:.1em solid black;
  box-shadow: .03em .03em 03em 0em #424447;
  #red{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }
}

Here I modified your code using sass: https://codepen.io/giannidk/pen/bgONQY?editors=0100