Rushabh Shah Rushabh Shah - 1 month ago 18
CSS Question

How to vertically center modal?

everyone my name is Rushabh Shah. I want to do vertically center modal. I searched lot on google but nothing helpful is found. Here is my html code.

<div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

<div class="modal-dialog modal-sm" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

<h4 class="modal-title">Are you sure you want to inactivate it?</h4>

</div>

<div class="modal-body">

<div class="form-group">

<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">No</button>

<button type="button" class="btn btn-primary" id="yes">Yes</button>

</div>

</div>

</div>

</div>


jQuery code:

function inactive(id,ths){

$("#confirmation").modal("show");

}


Please help me. How can I vertically center it? Thanks in advance.

Answer

Not tested but you can try this

.yourElement{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}