Vertical alignment of button [duplicate] - html

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Vertical alignment in Bootstrap 4
(2 answers)
Closed 5 years ago.
Hi I have created one button. I gave it bootstrap for centring. Now I need to get that button vertically align to centre of page without margin and padding. How would I do that?
HTML is given below
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
<button class="case-study-button">
CASE STUDY <span class="fa fa-angle-double-down"></span>
</button>
</div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>
CSS is give below
/* without margin and padding */
.case-study-button {
height: 61px;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}

Answer 1

You can position the button absolute to 50% and then use transform translate to center it. Using a fixed width on the button might cause problems with responsiveness.
.wrap {
border: 1px solid black;
height: 300px;
}
.case-study-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 61px;
max-width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 wrap"><button class="case-study-button"> CASE STUDY <span class="fa fa-angle-double-down"></span>
</button></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

Answer 2

You can set 'display:flex' to its parent div and 'align-items:center'.
.btnOuter{
display:flex;
align-items:center;
height:500px
}
.case-study-button {
height: 61px;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
<div class="btnOuter">
<button class="case-study-button"> CASE STUDY <span class="fa fa-angle-double-down"></span></button>
</div>
</div>
<div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

Answer 3

Change the CSS part like this :-
.case-study-button {
height: 10%;
width: 267px;
border-radius: 30px;
background: transparent;
border-color: white;
border-width: 2px;
position:absolute;
top:45%;
}