How to align Modal form in center using css?

Question

This is my modal form and I want to show this modal in center , I was trying with some css but it didnt helped , any sort of help is appreciated . This is my code

    <div class="modal fade" id="success" role="dialog">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header" style="background: #1ab394;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;">
                        <button type="button" class="close" data-dismiss="modal"
                          style="opacity:1;color:#fff;">&times;</button>
                        <h4 class="modal-title text-center"><img
                            src="https://lh3.googleusercontent.com/-Zxh4srAEtU0/Wp0cZV-PJuI/AAAAAAAAD4E/En5x5c53s44jzvG8M0sSyFZXoRhGXfBzwCL0BGAYYCw/h100/2018-03-05.png"
                            alt=""></h4>
                      </div>
                      <div class="modal-body">
                        <p style="text-align:center;color:#1ab394;font-size:24px;font-weight:500;">Cheers! Payment
                          Successful!</p>
                        <p style="color:#555555;">Transaction ID:&nbsp;<strong
                            style="font-weight:500;font-size:16px;color: #222222;">152458258752515</strong><br>Payment
                          amount:&nbsp;<strong
                            style="font-weight:500;font-size:16px;color: #222222;">Rs.35000</strong><br>The above rent shall
                          credited to your landlord's bank account in<strong
                            style="font-weight:500;font-size:15px;color: #222222;"> 3 working days</strong></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
    
                  </div>
                </div>
              </div>
            <

/div>

css what I was trying was something like this :-

.modal {
    text-align: center;
    padding: 0!important;
  }
  
  .modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px; /* Adjusts for spacing */
  }
  
  .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }

Answer 1

If you want to center it vertically, then you can make it simply by flexbox. So add additional styles in your document:

html, body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}