How can I vertically center an element? [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 7 months ago.
How can I vertically center the button?
Image of a problem
I started to learn HTML&CSS and I don't know how can I align the button to vertical center of a div in a proper way.
None of text-align:center etc. doesn't work for me.
Second question: How can I make the outer one div same height as a middle-div?
p {
font-family: Roboto, Arial;
margin-top: 0;
margin-bottom: 0;
}
.user {
font-weight: 500;
}
.photo {
width: 46px;
border-radius: 28px;
}
.user-name,
.user-description,
.status {
width: 150px;
}
.avatar,
.middle-div,
.follow {
display: inline-block;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<div>
<div class="avatar">
<img class="photo" src="av1.jpg">
</div>
<div class="middle-div">
<div>
<div class="user-name">
<p class="user">
oliver
</p>
</div>
<div class="user-description">
<p class="user-desc">
the cat
</p>
</div>
<div class="status">
<p class="status-desc">
Popular
</p>
</div>
</div>
</div>
<div class="follow">
<button class="follow-button">Follow</button>
</div>
</div>

Answer 1

I have edited your code with the changes. I added the card class on the card and made it a flexbox by adding the following display: flex;
and align-items: center;.
p {
font-family: Roboto, Arial;
margin-top: 0;
margin-bottom: 0;
}
.user {
font-weight: 500;
}
.photo {
width: 46px;
border-radius: 28px;
}
.user-name,
.user-description,
.status {
width: 150px;
}
.card {
display: flex;
align-items: center;
}
<div class="card">
<div class="avatar">
<img class="photo" src="av1.jpg">
</div>
<div class="middle-div">
<div>
<div class="user-name">
<p class="user">
oliver
</p>
</div>
<div class="user-description">
<p class="user-desc">
the cat
</p>
</div>
<div class="status">
<p class="status-desc">
Popular
</p>
</div>
</div>
</div>
<div class="follow">
<button class="follow-button">Follow</button>
</div>
</div>