how to center my div vertically - html

Question

I've looked around and tried many different solutions, yet none of them worked for me. Basically I am just trying to have my <center> tag aligned vertically, so the margin on the top is always equal to the bottom when resizing. What kind of CSS can I apply to do this?
.modalText {
font-weight: 100;
font-size: 2.5em;
}
.paypalCenterModal {
margin: auto 0;
}
.modalText {
margin: auto 0;
}
.img-responsiveModal {
margin: 30px 0px 30px 0px;
display: block;
width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm" <p>Form Content In Here</p>
</form>
</center>
</div>
</div>

Answer 1

You can easily get this by using Flexbox.
If you are thinking to upgrade your bootstrap to version4 you will get this easily.
And as I see you are not using bootstrap grid col-* and row classes according to doc.
Read Bootstrap3 Grid
Stack Snippet
.v-align-section .row {
display: flex;
align-items: center;
}
.modalText {
margin-top: 0;
}
#media (max-width:767px) {
.v-align-section .row {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="v-align-section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal img-responsive" id="myImg3" src='http://via.placeholder.com/250x350' />
</div>
<div class="col-sm-6">
<form class="paypalForm">
<h3 class="modalText">Select Options</h3>
<p>Form Content In Here</p>
</form>
</div>
</div>
</div>
</div>

Answer 2

You can adjust the bottom values in the class it self. Try the following snippet. Further more you can adjust values with using rem rather than pixel to improve the responsiveness.
.divThatNeedsToBeCenteredVertically {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="divThatNeedsToBeCenteredVertically">
<h3 class="modalText">Select Options</h3>
<form class="col-sm-6 paypalForm">
<p>Form Content In Here</p>
</form>
</center>
</div>
</div>

Answer 3

Why did you use "centre" tag? It has been obsoleted. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
Below is the solution, make sure that the position of the parent div, with class name "row", is not "static" (by default, the position of div is static, you can change it to "relative" or whatever).
.row {
position: relative;
height: 100vh;
}
.divThatNeedsToBeCenteredVertically {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gray;
}
For more details look at the URL: https://jsfiddle.net/sanqian/y9ftobma/
Here is another example, I recommend you to having a look at it.
https://jsfiddle.net/sanqian/La9m2u8L/

Answer 4

Try adding this CSS Snippet
form{
position : absolute;
transform: translate(-50%,-50%);
top : 50%;
left : 50%;
margin: auto;
}
We are setting the top and left to middle of the form screen

Answer 5

Try this..!
.modalText {
font-weight: 100;
font-size: 2.5em;
margin: auto 0;
}
.img-responsiveModal {
max-width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
.row{
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjM2ODEzMDUzMF5BMl5BanBnXkFtZTcwNDQ2NzU3OQ##._V1_UY317_CR20,0,214,317_AL__QL50.jpg"/>
</div>
<div class="col-xs-6 paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm"><p>Form Content In Here</p></form>
</div>
</div>
</div>
</div>