Bootstrap button icon not centered - html

Question

I am using the boostrap social button for google but the google icon is not vertically centered.
How do i get the "G" to be centered vertically.
body {
background-color: #E8ECEF;
}
.centered {
padding-top: 200px;
text-align: center;
}
.secret-text {
text-align: center;
font-size: 2rem;
color: #fff;
background-color: #000;
}
<!-- just tried this part out also didn't change the G-->
.btn-google{
display: flex;
align-items: center;
justify-content: center;
}
<div class="container mt-5">
<h1>Login</h1>
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<!-- Makes POST request to /login route -->
<form action="/login" method="POST">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-dark">Login</button>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
<i class="fab fa-google"></i>
Sign In with Google
</a>
</div>
</div>
</div>
</div>
</div>
Added the full code for my login page minus the header/footer and included css as well as new image
I am using the bootstrap social css as well

Answer 1

All you need to do is use some flexbox magic.
.btn-google {
/* Since your button is a block button, otherwise use inline-flex */
display: flex;
align-items: center;
justify-content: center;
}
Try that and let me know if it works fine!

Answer 2

.className{
vertical-align: baseline;
}
try this class

Answer 3

You can use the flexbox to align the items horizontally and vertically center. If you want to adjust your icon relative to your text, you can use transform property.
Here is code.
HTML
<div class="card">
<div class="card-body">
<a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
<i class="fab fa-google"></i>
Sign In with Google
</a>
</div>
</div>
</div>
.card{
background-color:#DD4B39;
color:#fff;
width:300px;
margin:5px auto;
}
.card a{
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.card a i{
margin-right:5px;
transform:translateY(2px)
}

Answer 4

All you have to do is adding a text-center class to your icon;
If that doesn't work too, add justify-content-center class to the div that contains col-sm-4.

Answer 5

This will center it CENTERING VERTICALLY
min-height: 10em;
display: table-cell;
vertical-align: middle
Let me know if this works for you :)