如何使用css將模態表單居中對齊？

Question

這是我的模態形式，我想在中心顯示這個模態，我嘗試使用一些 css 但它沒有幫助，任何形式的幫助表示贊賞。 這是我的代碼

    <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 是這樣的：-

.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

如果你想垂直居中，那么你可以簡單地通過 flexbox 來制作它。 因此，在您的文檔中添加其他樣式：

html, body {
    height: 100%;
}

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