So zentrieren Sie ein DIV mit unbekannter Größe horizontal und vertikal auf dem Bildschirm

Ich muss ein DIV in der Mitte des Bildschirms zentrieren, sowohl horizontal als auch vertikal, ich kenne die DIV-Größe nicht, und das div ist position:fixed;.So zentrieren Sie ein DIV mit unbekannter Größe horizontal und vertikal auf dem Bildschirm

Dieser negative Rand Trick funktioniert nicht, weil ich die div Größe nicht kenne. top:50%; left:50%; magin-top:-100; margin-left:-100;

Die margin-left: auto; margin-right: auto; nicht da funktioniert funktioniert nicht mit position:fixed; und margin-top:auto; margin-bottom:auto; tut auch nicht vertikal Zentrum;

Ich fand, dass diese Methode: display: table-cell; vertical-align: middle; nicht funktionieren Ether;

Ich weiß, wie dies mit JavaScript mit GetComputedStyle, um die div-Inhalt Größe zu bekommen, und tun die Mathe, um es Position zu beheben, aber ich möchte eine reine CSS-Lösung, weil ich nicht jedes Mal ein JS auslösen möchte Mein Div-Inhalt ändert sich.

Quelle

2012-05-20 Vitim.us

Und wie ändert sich dein 'div' Inhalt? Durch einfache CSS-Animation oder JavaScript-Animationen? – balexandre

@balexandre gibt es keine Animation, Änderungen der Inhalte über Ajax –

Würde so etwas funktionieren? Es verwendet auch die display: table-cell, aber es erfordert 2 Div-Tags zu arbeiten ... das übergeordnete Tag mit einem display: table Stil angegeben.

Hinweis: Ich habe z-index:-1; zu der Centerbase-Klasse hinzugefügt. Sie können dies basierend auf Ihrem Design optimieren.

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

Wenn Sie Text hinzufügen müssen, die nicht Zentrum innerhalb des centerpane ausgerichtet ist, können Sie ein anderes div innerhalb der centerpane hinzufügen und den Stil als etwas angeben: text-align:left; width:400px; margin:0px auto; Sie haben eine Breite für diese zusätzliche div angeben .

Quelle

2012-05-20 06:31:38 signal2013

Betrachten Sie die demo (Höhe ist unbekannt, Breite ist eingestellt).

Sie können CSS-Tabellen verwenden (in diesem Beispiel ist html die Tabelle, während body eine Tabellenzelle ist). Markup:

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

CSS:

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

Sie benötigen eine Lösung für IE < = 7 (seit IE < = 7 nicht weiß, über Tisch | table-cell)?

Quelle

2012-05-20 08:31:57 roger

Ich brauche nur Unterstützung von Compilant-Browsern. Ändern von HTML- und Body-Styles nicht mit anderen Inline-Inhalt auf der Seite, oder es funktioniert mit einem div-Wrapper? –

Mit Hilfe von CSS-Tabellen können Sie eine Box mit unbekannter Höhe vertikal zentrieren. Die Höhe der Box wird durch ihren Inhalt bestimmt. Sehen Sie demo, die die Position verwendet: feste Eigenschaft für die Box. Die Breite der Box ist ebenfalls.

Und dies ist die Abhilfe für IE < = 7:

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

Enthält diese Ihre Anforderungen?

Quelle

2012-05-20 17:28:03

Wenn Sie mit Positionen arbeiten, sind Transformationseigenschaften hilfreich.

Sie müssen nur die folgenden Eigenschaften zu dem Element hinzufügen, die zentriert hat,

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

Entfernen Sie die zusätzliche Marge und Polsterung zu dem Element hinzugefügt.

Quelle

2017-04-19 11:00:23

So zentrieren Sie ein DIV mit unbekannter Größe horizontal und vertikal auf dem Bildschirm

Antwort

Verwandte Themen