web-dev-qa-db-fra.com

Comment centrer une fenêtre modale sur une page?

J'essaie de centrer une fenêtre modale dans la page du navigateur. Je veux juste le centrer, afin qu'il soit réactif pour tous les écrans.

htmlmodal-dialogcenter
8
Raghu

Avec position: absolute En supposant que votre modal soit 300x300

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

Avec display: table Une autre façon de le faire est de créer une table d'affichage

<div class="modal">
    <div class="body">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>
<style>
    .modal {display:table;}
    .body {display:table-cell; vertical-align:middle; text-align:center;}
</style>
16
Waqar Alamgir
.modal
{
position: fixed;
left: 50%;
}
4
Rohan

Essayez ceci en aperçu de la page complète

   .modal {
       width: 100px;
       height: 100px;
       margin:0 auto;
       display:table;
       position: absolute;
       left: 0;
       right:0;
       top: 50%; 
       border:1px solid;
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%);
       -ms-transform:translateY(-50%);
       -o-transform:translateY(-50%);
       transform:translateY(-50%);
    }
<Div class="modal"></div>

2
Shurvir Mori

Si le conteneur modal est le suivant: 

<div id="containerDiv"> 
   <!--HTML modal -->
 </div>

Ajouter le code CSS

#containerDiv{
margin : 0 auto;
}
2
Abdennour TOUMI

Solution simple utilisant uniquement CSS: définir le centre modal sur écran

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