Issue with vertical centering of text [duplicate] - html

Question

This question already has answers here:
How to remove line spacing between HTML heading elements?
(4 answers)
Space before heading larger than space after heading with HTML and CSS
(3 answers)
Closed 1 year ago.
I am having an issue getting text to be centered vertically within a div. I've tried both CSS and bootstrap options, but not having luck. The closest that I get is with using align-items: center, however, the test is still offset from what should be middle.
Current code:
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
display: flex;
align-items: center;
justify-content: center;
}
.code-text {
font-size: 1.5rem;
color: #3BBA9C;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="code-quote mx-auto">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>
This is what I get:
If I remove the align-items: center, then it's much closer to the top of the element.

Answer 1

The h3 element has a bottom margin by default. Adding margin: 0 might do what you're after:
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
display: flex;
align-items: center;
justify-content: center;
}
.code-text {
font-size: 1.5rem;
color: #3BBA9C;
margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="code-quote mx-auto">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>

Answer 2

Bootstrap provides all the alignment and flex stuff you could ask for. Have a look at the docs.
Also note my adjustment to margin on the heading element.
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
}
.code-text {
font-size: 1.5rem;
margin-bottom: 0;
color: #3BBA9C;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="code-quote mx-auto d-flex flex-column
align-items-center justify-content-center">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>
</div>