Wie man ein Zentrum ein div auf der Größe ändert

Question

Ich habe auf die schon gestellten Fragen geschaut und mehrere Lösungen versucht, aber nichts scheint für mich zu arbeiten. Ich habe ein div mit mehreren divs innerhalb von ihm, und ich kann es nicht

Dies ist die Mutter div in der Mitte der Seite auf Resize zum Zentrum erhalten, das mehrere andere enthält

<div id="showme" class="newmodal" style="position: absolute; z-index: 1000; 
max-width: 561px; left: 700px; top: 263px; display: none;"> 

Dies ist CSS für die div

.newmodal { 
position: fixed; 
margin: 0 auto; 
max-width: 900px; /* our page width */ 
min-width: 500px; 
width: 50%; 

}

Sorry, wenn ich wirklich dumm bin zu sein, sehr neu in diesem. Ich habe versucht, die linken und oberen Inline-Stile zu entfernen, aber nichts funktioniert.

EDIT

ich vergaß zu erwähnen, dass dieser div versteckt wird und unhidden über eine Taste so sicher, ich bin nicht, ob das eines der aktuellen Antworten ändert.

Answer 1

.newmodal { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 50%; 
 
    max-width: 900px; 
 
    /* our page width */ 
 
    min-width: 500px; 
 
    background: #222; 
 
}

<div id="showme" class="newmodal">Some content</div>

Es wird Mitte div vertikal und horizontal.

Answer 2

1. der css-Teil von "margin: 0 auto" und "width 50%" sollte für das Kind Div und nicht das Elternteil sein.

2. Sie können Ihr Leben viel einfacher meinen Umzug in die flexbox, die das alles automatisch macht.

Siehe https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

Sie benötigen div Tag zu schließen. Warum verwenden Sie width,max-width,min-width? Versuchen Sie, den folgenden Code:

.newmodal { 
 
    background: red; 
 
    max-width: 200px; 
 
    margin: 0 auto; 
 
    height: 50px; 
 
}

<div id="showme" class="newmodal"></div>

Answer 4

Ich habe diese CodePen erstellt, die Sie verwenden können, um zu betrachten. Versuchen Sie so etwas wie dies mit:

.newmodal { 
    position: relative; 
    margin: 0 auto; 
    max-width: 900px; 
    min-width: 500px; 
    background-color: red; 
} 

Entfernen Sie alle Ihre Styling von Ihrem HTML, weil Sie die CSS und HTML Sie gab einige widersprüchliche Stile, der sich zwischen hatte.

<div id="showme" class="newmodal"> 
    <!--Some added data--> 
</div> 

Denken Sie daran, dass auch um margin: 0 auto; zu arbeiten, das Element block Stil sein muss, kann es nicht float, ist es nicht fixed oder absolute sein kann, und ein width, die nicht auto ist.Fand diese Informationen aus diesem Beitrag: What, exactly, is needed for "margin: 0 auto;" to work?

Edit:

Also, wenn Sie jQuery verwenden und Sie wollen es und erscheinen verschwinden, können Sie etwas tun:

$(".newmodal div").on("click", function() { 
    if ($(this).css('display') == 'block') { 
     $(this).hide(); 
    } 
    else { 
     $(this).show(); 
    } 
}); 

Das einzige Problem dabei ist, dass das Element wieder erscheint. Aber ich bin mir nicht sicher, wie Ihr gesamtes Projekt aussieht, aber ich hoffe, das weist Sie in die richtige Richtung.

Answer 5

Versuchen Sie folgendes:

 
#container { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border: solid blue 1px; 
 
    width: 100%; 
 
} 
 

 
.newmodal { 
 
    border: 1px solid black; 
 
    display: block; 
 
    margin: 1.5em auto; 
 
    text-align:center; 
 
    padding:7px; 
 
    width: 50%; 
 
    background:#222; 
 
    color:#fff; 
 
}

<div id="container"> 
 
    <div class="newmodal">Some content here</div> 
 
</div>