fix: center certificates vertically when viewed on large scree… (#37427)

* fix: center certificates vertically when viewed on large screens

* adjust alignment for all screen sizes

* change height to min-height

client/src/client-only-routes/ShowCertification.js

@@ -104,6 +104,7 @@ class ShowCertification extends Component {
       completionTime
     } = cert;
     return (
+      <div className='certificate-outer-wrapper'>
         <Grid className='certificate-wrapper certification-namespace'>
           <Row>
             <header>
@@ -167,6 +168,7 @@ class ShowCertification extends Component {
             </footer>
           </Row>
         </Grid>
+      </div>
     );
   }
 }

client/src/pages/certification.css

@@ -30,6 +30,13 @@
   font-family: 'Sax Mono', monospace;
 }
 
+/* center the certificate vertically */
+.certificate-outer-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+}
+
 .certification-namespace header {
   width: 100%;
   height: 140px;