webentwicklung-frage-antwort-db.com.de

Wie zentriere ich ein modales Fenster auf einer Seite?

Ich versuche, ein modales Fenster in der Browserseite zu zentrieren. Ich möchte es nur zentrieren, damit es für alle Bildschirme ansprechend ist.

8
Raghu

Mit Position: absolut Angenommen, Ihr Modal ist 300x300

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

Mit display: table Eine alternative Möglichkeit ist das Erstellen einer Anzeigetabelle

<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

Versuchen Sie dies in der Ganzseitenvorschau

   .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

Wenn modaler Container wie folgt lautet: 

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

Fügen Sie CSS-Code hinzu

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

Einfache Lösung nur mit css: modal center auf screen setzen

.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