CSS-Hilfe Verschieben eines DIV in die Mitte, wenn genügend Speicherplatz vorhanden ist

Question

Ich versuche ein div im Webbrowser zu zentrieren, wenn genügend Speicherplatz vorhanden ist. Wenn nicht, sollte es zwischen 2 divs zusammenfallen.

Dies ist der kollabierte Ansicht

Und das wäre die erweiterte Ansicht

Ich habe versucht, so viele verschiedene Dinge, aber nichts scheint richtig zu arbeiten. Wenn ich etwas bekomme, das richtig aussieht, endet die filterDiv über die Spitze von titleDiv oder buttonDiv oder beides.

Hier ist ein Code, mit dem ich begann und sollte die minimierte Ansicht darstellen, wenn der Browser nicht sehr breit ist.

<style type="text/css"> 
    .controlsDiv{ 
     background-color:yellow; 
     border: 1px solid black; 
    } 
    .titleDiv{ 
     background-color:Red; 
     width:25em; 
     height: 5em; 
     border: 1px solid black; 
    } 
    .filterDiv { 
     background-color: gainsboro; 
     width: 600px; 
     height: 10em; 
     border: 1px solid black; 
    } 
    .buttonDiv{ 
     width:25em; 
     height:5em; 
     background-color:green; 
     border: 1px solid black; 
    } 

</style> 

<div class="controlsDiv" > 
    <div class="titleDiv"> 
     <h2>titleDiv</h2> 
    </div> 
    <div class="filterDiv"> 
     <h2>filterDiv</h2> 
     <h2>Centered in Browser Window</h2> 
     <h2>titleDiv and ButtonDiv Collapsed</h2> 
    </div> 
    <div style:clear:both></div> 
    <div class="buttonDiv"> 
     <h2>buttonDiv</h2> 
    </div> 
</div> 

Vielen Dank im Voraus!

Answer 1

Sie können jederzeit die Position absolut erforderliche div:

<style type="text/css"> 
    .controlsDiv{ 
     background-color:yellow; 
     border: 1px solid black; 
    } 
    .titleDiv{ 
     background-color:Red; 
     width:25em; 
     height: 5em; 
     border: 1px solid black; 
    } 
    .filterDiv { 
     background-color: gainsboro; 
     width: 600px; 
     height: 10em; 
     border: 1px solid black; 
    } 
    @media(min-width: 900px) { 
     .filterDiv { 
     position: absolute; 
     left: calc(50% - 300px); 
     top: 0; 
    } 
    } 
    .buttonDiv{ 
     width:25em; 
     height:5em; 
     background-color:green; 
     border: 1px solid black; 
    } 
</style>