CSS fontAwesome icon doesn´t center [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am aware that the initial question is answered several times. Usually I know how to do it, so its more a bug fixing question instead of a general question. The code shows a cross which behaves as a toggle. If clicked another 3 elements appear, where the one on the middle gives me headache. I used a fontAwesome icon and can´t figure out why it will not center in this div element.
I am summon a CSS master which could solve my bug. ;)
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<style>
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width:40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before, .modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
</style>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>

Answer 1

Add display: flex to .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) to make use of the align-items: center property.
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before,
.modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
display: flex; /* ADD THIS */
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>