How can I vertically center an element?

Question

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>

The easiest way I have found to do this is to use flex instead.. look into that. — Obsidianlab, Aug 08 '22 at 20:21
https://stackoverflow.com/questions/4374650/how-do-i-center-content-in-a-div-using-css/28507787#28507787 Either flexbox, grid or you can use css-transform. — F. Müller, Aug 08 '22 at 20:22

Obsidianlab · Accepted Answer · 2022-08-08T20:35:20.203

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>

How can I vertically center an element?

1 Answers1