it-swarm.com.de

Mittleres festes Div mit dynamischer Breite (CSS)

Ich habe ein Div, das dieses CSS haben wird:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Wie kann ich dieses Div zentrieren? Ich kann nutzen margin-left: -450px; left: 50%; Dies funktioniert jedoch nur, wenn der Bildschirm größer als 900 Pixel ist. Danach (wenn das Fenster <900 Pixel ist) wird es nicht mehr zentriert.

Ich kann das natürlich mit irgendeiner Art von js machen, aber gibt es ein "richtigeres", dies mit CSS zu tun?

77
gubbfett

Sie können eine fixed oder absolute positionierte Elementeinstellung right und left auf 0 Zentrieren und dann margin-left & margin-right Zu auto, als ob Sie ein static positioniertes Element zentrieren würden.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Sehen Sie, wie dieses Beispiel funktioniert an dieser Geige .

202
laconbass

Hier ist eine andere Methode, wenn Sie die Eigenschaft transform von CSS3 sicher verwenden können:

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... oder wenn Sie sowohl horizontal als auch vertikal zentrieren möchten:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
47
Alan Bellows
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Sie müssten es in einen Behälter wickeln. Hier ist das CSS

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
6
Mathew Berg

Dies funktioniert unabhängig von der Größe des Inhalts

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

quelle: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

2
Leonardo