Vertically center seed phrase text in box

website/index.html

@@ -16,7 +16,9 @@
 
     <section class="generator">
       <div class="wrapper">
-        <div class="seed-text"></div>
+        <div class="seed-text-container">
+          <div class="seed-text"></div>
+        </div>
         <strong>Word Count</strong>
         <div class="bit-slider"></div>
         <button class="regenerate-seed" type="button">Regenerate Seed</button>

website/style.css

@@ -24,17 +24,28 @@ body {
   text-align: center;
 }
 
-.generator .seed-text {
+.generator .seed-text-container {
+  position: relative;
   background-color: rgba(0, 0, 0, 0.05);
   border: 2px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  padding: 1em;
   text-align: center;
   font-size: 1.4em;
   font-family: "Comic Sans MS", cursive, sans-serif;
+  height: 4em;
   margin-bottom: 1em;
 }
 
+.generator .seed-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1em;
+}
+
 .generator .seed-text span:nth-of-type(1),
 .generator .seed-text span:nth-of-type(2) {
   color: red;