在不使用flex属性的情况下以固定高度div垂直和水平对齐项目

Question

How to align the thank_pge_center class vertically and horizontally within the fixed height div.

Without using flex property

 .cr_eve_cont { background: #fff; border-radius: 6px; margin-top: 32px; margin-bottom: 30px; padding: 1px 15px 1px 15px; box-shadow: 2px 0px 15px 1px rgba(231,231,231,1); } .thank_eve_cont_inner{ border: 1px solid #E2E2E2; margin-bottom: 15px; margin-top: 15px; height: 450px; } .thank_pge_center{ text-align: center; } .thank_pge_center pi{ color: #00C95F; border: 2px solid #00c95f; border-radius: 30px; padding: 10px; } .thank_pge_center h1{ margin-top: 15px; margin-bottom: 15px; font-size: 25px; text-transform: none; font-weight: 700; color: #2795CA; } .thank_pge_center p{ color: #373737; font-size: 18px; margin-bottom: 5px; } .btn_ok{ text-align: center; background: #0097C7; color: #fff; width: 120px; padding: 8px 10px 8px 10px; border-radius: 3px; text-transform: uppercase; font-size: 16px; font-weight: 600; margin-top: 10px; } 

 <div class="cr_eve_cont"> <div class="thank_eve_cont_inner"> <div class="thank_pge_center"> <p><i class="fa fa-check fa-2x" aria-hidden="true"></i></p> <h1>Thank you for your order</h1> <p>Check your email for a booking confirmation.</p> <p>We'll see you soon!</p> <button class="btn_ok">ok</button> </div> </div> </div> 

Answer 1

With using display table

.thank_eve_cont_inner {
   display: table;  
}

.thank_pge_center {
   display: table-cell;
   vertical-align: middle;
}

 .cr_eve_cont { background: #fff; border-radius: 6px; margin-top: 32px; margin-bottom: 30px; padding: 1px 15px 1px 15px; box-shadow: 2px 0px 15px 1px rgba(231,231,231,1); } .thank_eve_cont_inner{ border: 1px solid #E2E2E2; margin-bottom: 15px; margin-top: 15px; height: 450px; display:table; width:100%; } .thank_pge_center{ text-align: center; display:table-cell; vertical-align:middle; } .thank_pge_center pi{ color: #00C95F; border: 2px solid #00c95f; border-radius: 30px; padding: 10px; } .thank_pge_center h1{ margin-top: 15px; margin-bottom: 15px; font-size: 25px; text-transform: none; font-weight: 700; color: #2795CA; } .thank_pge_center p{ color: #373737; font-size: 18px; margin-bottom: 5px; } .btn_ok{ text-align: center; background: #0097C7; color: #fff; width: 120px; padding: 8px 10px 8px 10px; border-radius: 3px; text-transform: uppercase; font-size: 16px; font-weight: 600; margin-top: 10px; } 

 <div class="cr_eve_cont"> <div class="thank_eve_cont_inner"> <div class="thank_pge_center"> <p><i class="fa fa-check fa-2x" aria-hidden="true"></i></p> <h1>Thank you for your order</h1> <p>Check your email for a booking confirmation.</p> <p>We'll see you soon!</p> <button class="btn_ok">ok</button> </div> </div> </div> 

With flex box properyt in class(.thank_eve_cont_inner)

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

you can see also in snippet

 .cr_eve_cont { background: #fff; border-radius: 6px; margin-top: 32px; margin-bottom: 30px; padding: 1px 15px 1px 15px; box-shadow: 2px 0px 15px 1px rgba(231,231,231,1); } .thank_eve_cont_inner{ border: 1px solid #E2E2E2; margin-bottom: 15px; margin-top: 15px; height: 450px; display:flex; align-items: center; justify-content: center; } .thank_pge_center{ text-align: center; } .thank_pge_center pi{ color: #00C95F; border: 2px solid #00c95f; border-radius: 30px; padding: 10px; } .thank_pge_center h1{ margin-top: 15px; margin-bottom: 15px; font-size: 25px; text-transform: none; font-weight: 700; color: #2795CA; } .thank_pge_center p{ color: #373737; font-size: 18px; margin-bottom: 5px; } .btn_ok{ text-align: center; background: #0097C7; color: #fff; width: 120px; padding: 8px 10px 8px 10px; border-radius: 3px; text-transform: uppercase; font-size: 16px; font-weight: 600; margin-top: 10px; } 

 <div class="cr_eve_cont"> <div class="thank_eve_cont_inner"> <div class="thank_pge_center"> <p><i class="fa fa-check fa-2x" aria-hidden="true"></i></p> <h1>Thank you for your order</h1> <p>Check your email for a booking confirmation.</p> <p>We'll see you soon!</p> <button class="btn_ok">ok</button> </div> </div> </div> 

Answer 2

Add this css to your code: (without using flex property)

.thank_pge_center{
     text-align: center;
     position: relative;
     top: 50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
     transform: translateY(-50%);
 }

 .cr_eve_cont { background: #fff; border-radius: 6px; margin-top: 32px; margin-bottom: 30px; padding: 1px 15px 1px 15px; box-shadow: 2px 0px 15px 1px rgba(231,231,231,1); } .thank_eve_cont_inner{ border: 1px solid #E2E2E2; margin-bottom: 15px; margin-top: 15px; height: 450px; } .thank_pge_center{ text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); /* IE 9 */ -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */ transform: translateY(-50%); } .thank_pge_center pi{ color: #00C95F; border: 2px solid #00c95f; border-radius: 30px; padding: 10px; } .thank_pge_center h1{ margin-top: 15px; margin-bottom: 15px; font-size: 25px; text-transform: none; font-weight: 700; color: #2795CA; } .thank_pge_center p{ color: #373737; font-size: 18px; margin-bottom: 5px; } .btn_ok{ text-align: center; background: #0097C7; color: #fff; width: 120px; padding: 8px 10px 8px 10px; border-radius: 3px; text-transform: uppercase; font-size: 16px; font-weight: 600; margin-top: 10px; } 

 <div class="cr_eve_cont"> <div class="thank_eve_cont_inner"> <div class="thank_pge_center"> <p><i class="fa fa-check fa-2x" aria-hidden="true"></i></p> <h1>Thank you for your order</h1> <p>Check your email for a booking confirmation.</p> <p>We'll see you soon!</p> <button class="btn_ok">ok</button> </div> </div> </div>