Position element in der Mitte des Bildschirms nach dem scrollen

Meine Seite ist 2x die Höhe des Bildschirms (Größe variiert je nach anderen Element auf der Seite). Ich will zeigen, einen absolut positionierten Bereich in der Mitte des Bildschirms, unabhängig von der scroll-position.

Ich Wende die folgenden style-auf den button klicken, jedoch wenn ich ganz nach unten scrollen, das element zeigt sich an der Spitze der Seite, seit es zählt die 50% von oben auf die gesamte Seite.

.Centered {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 45%;
}

Wie kann ich die position das element in der Mitte der Seite basiert auf der schriftrolle, Trank an der Zeit, eine Taste zu klicken?

Danke.

InformationsquelleAutor roman m | 2009-02-26

  1. 19

    Sind Sie sicher, dass Sie nicht wollen,Feste Positionierung?

    Absolute Positionierung Positionen ein Element im Kontext einer Seite, so wird es
    nach oben und unten scrollen mit der Seite. Feste Positionierung Positionen eines Objekts innerhalb des Kontexts des Viewports, also es bewegt sich nicht mit der Seite. Stattdessen bleibt er in der gleichen position, egal wie Sie Blättern.

    .Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

    Menü auf dieser Seite ist ein gutes Beispiel für die Feste Positionierung.

    Strg+F5 war alles was ich brauchte 🙂
    Wie zum Teufel macht diese center nichts?
    Timwi: gut, ich habe nicht die HTML-römisch-m Anwendung, aber die top:50% bewegen wird, die .Centered element auf halbem Weg unten auf der Seite, und die left:45% bewegen wird, es die meisten der Weg in Richtung der horizontalen Mitte. So ein dünnes element, das etwa 10% der Seitenbreite breit erscheint zentriert.

    InformationsquelleAutor rampion

  2. 0
    .Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

    Diese Weise den trick wird die Suche nach einem geeigneten Wert für max-height.

    die Höhe variiert je nach der Anzahl der Elemente im raster auf der Seite
    dann müssen Sie den Parameter " max-Höhe dynamisch per javascript nach dem raster gefüllt mit Daten

    InformationsquelleAutor John Leidegren

  3. -1

    Versuchen, mit den jQuery Center Plugin.

    es doesn ' T sogar arbeiten seine demo
    Was funktioniert nicht in der demo?
    Nichts funktioniert in seiner demo. Es ist nichts, das ist zentriert.

    InformationsquelleAutor Yaakov Ellis

Schreibe einen Kommentar