Verticalement contenu Centrer en html

Je suis en train de centrer verticalement un <div> dans un <body>Verticalement contenu Centrer en html

La raison pour laquelle je suis en train de le faire parce que je suis en train de concevoir un site Web qui est dans le style de Windows 8 Écran de démarrage Metro

Est-ce que quelqu'un sait comment cela peut être fait?

Source

2014-06-16 SomeoneSpecial99

Poster le code que vous avez essayé. – j08691

Bienvenue sur SO. Vous devriez toujours vérifier qu'une question n'existe pas avant d'en poster une similaire. Googling ceci a montré le résultat immédiatement – Liam

@ j08691 Où puis-je le publier? -_- – SomeoneSpecial99

Si vous voulez bloc centre, vous pouvez utiliser verticaly

marge de cette astuce est une moitié de votre bloc de taille.

Si vous utilisez ceci, vous avez besoin de la taille de votre bloc.

html:

<div id="center"></div>

css:

#center{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    height:400px; 
    width:600px; 
    margin-left:-300px; 
    margin-top:-200px; 
}

DEMO: http://jsfiddle.net/ucbRs/

ou vous pouvez également utiliser:

css:

#center{ 
    position:absolute; 
    left:100px; 
    top:100px; 
    bottom:100px; 
    right:100px; 
}

DEMO: http://jsfiddle.net/ucbRs/1/

ou vous pouvez également utiliser une propriété CSS3 align-content comme ceci:

body{ 
    display:flex; 
    flex-flow: row wrap; 
    align-content:center; 
} 
#center{ 
    margin:0 auto; 
}

DEMO: http://jsfiddle.net/ucbRs/3/

Source

2014-06-16 14:17:50

Bienvenue sur SO!

Centrer verticalement un div est réellement très simple.

div{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}

Voilà, vous l'avez.

Demo

Vous pouvez également envisager absolute centering:

div{ 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

Demo

Source

2014-06-16 14:22:19 AstroCB

Verticalement contenu Centrer en html

Répondre

Questions connexes