How to vertically center a button in a container - css

Question

How do I vertically center my view button within the box container.
I tried styling the button with vertical-align:center; but it didn't work.
I tried adding: position: relative; top: 50%; transform: perspective(1px) translateY(-50%);.
But this just makes half of the button appear on top of the container and the other half inside the container
View:
<div class="container signup2">
<div class="title container">
<h2> Enrolled Courses: </h2>
</div>
<div class="container box">
<div class="row col-centered">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 index">
<h3><%= course.name %></h3>
<p><%= course.description %></p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<%= link_to "View", course_path(course), class: "btn button buttonmargin align" %>
</div>
</div>
</div>
</div>
custom.scss:
.signup2 {
margin-top: 120px;
}
.title {
margin-bottom: 15px;
}
.box {
background-color: #f7f7f7;
margin-bottom: 20px;
}
.index {
text-align: left;
}
.align {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
.button {
background-color: #20B2AA;
color: white;
}
.buttonmargin {
margin-left: 150px;
}
This is how it looks like

Answer 1

Try using flex.
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 align"> //moved align class here
<%= link_to "View", course_path(course), class: "btn button buttonmargin" %>
</div>
And css for align :
.align {
display: flex;
justify-content: center;
align-items: center;
}
Here is codesandbox link

Answer 2

Shubham's answer is almost correct. However, the css class that needs to have a display:flex property is actually on the row itself. Instead of modifying the CSS, Bootstrap 4.0 has a built-in class called .d-flex that you can pair with .align-items-center and it will work. See examples below:
With no defined height properties:
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-12">
Anything in here will be vertically centered
</div>
</div>
</div>
With a defined height property on the container:
<div class="container d-flex align-items-center" style="height:500px">
<div class="row">
<div class="col-12">
Anything in here will be vertically centered
</div>
</div>
</div>