Slik plasserer du en div midt på skjermen når siden er større enn skjermen

Hei, jeg bruker noe som ligner på følgende for å få en div plassert midt på skjermen:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>

<div id="mydiv">Test Div</div>

Problemet med dette er imidlertid at det plasserer elementet midt på siden, ikke skjermen. Så hvis siden er noen få skjermhøyder og jeg er øverst på siden (den øverste delen av delen vises på skjermen) når jeg får div-en til å vises, vises den ikke engang på skjermen. Du må bla nedover for å se den.

Kan noen fortelle meg hvordan du får den til å vises midt på skjermen?

Hussein
Redigerte spørsmål 16. februar 2011 в 3:33
Programmering
window html css center
16. februar 2011 в 3:06
8 visninger
Løsning

bare legg til position:fixed og det vil holde det i sikte selv om du blar nedover. se det på [http://jsfiddle.net/XEUbc/1/][1]

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
Hussein
Redigert svar 16. februar 2011 в 3:32
Kommentarer (2)

Jeg testet nettopp den eksakte koden på en testside, og den sentrerte div perfekt på siden, selv med omtrent 100 <br / > før den for å prøve å skyve den ned.

Kanskje prøv å sjekke resten av koden din for å se om du har noe som enten overskriver DIV&# 39s verdier eller som påvirker DIV-en din for å forårsake disse problemene.

Kommentarer (1)

For dette må du registrere skjermstørrelsen. Det er ikke mulig med CSS eller HTML; du trenger JavaScript. Her er oppføringen i Mozilla Developer Center på vindusegenskaper https://developer.mozilla.org/en/DOM/window#Properties

Registrer den tilgjengelige høyden og posisjonen deretter.

Scott Radcliff
Redigert svar 16. februar 2011 в 3:30
Kommentarer (0)