How to get my bootstrap modal at the center of the page - html

Question

I'm trying to load the bootstrap modal containing information retrieved from the database.
I'm fetching the results in the modal using AJAX .
The bootstrap modal is loaded correctly but not on the center of the page,it is loaded on the right corner of the page.
I want it to be on the center of the page
I've tried to add css properties on modal class and also search for the problem on different platform but didn't find anything.
After clicking this anchor tag I've bind the modal
<a href="" onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye' data-toggle="modal" data-target="#exampleModalLong"'></a>
This is the code for ajax
function show(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"findinfo.php?id="+id,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') )
{
document.getElementById("mbody").innerHTML = xhr.responseText;
}
}
}
here is the modal I've used
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body" id = 'mbody'>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want The bootstrap modal on the center of the page,it is loaded on the right corner of the page.
Image shows this

Answer 1

Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}

Answer 2

You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards