J'ai des problèmes de centrage verticalement et horizontalement div

Question

J'ai un peu de mal à centrer un div horizontalement et verticalement. J'ai jeté un coup d'œil rapide et je ne peux pas vraiment comprendre les autres réponses, alors j'ai pensé que je poserais ma propre question. Ce que je cherche à faire est de centrer ma div avec du texte horizontalement et verticalement, mais j'ai besoin que le conteneur div reste parfaitement dimensionné à la fenêtre.

Voici le css qui me pose problème.

body{margin:0 auto;} 

div#section1 {height: 100vh;background: black;} 

De plus, voici un lien vers JSFiddle, je ne pouvais pas poster HTML ici pour une raison quelconque, le bouton « Post » serait grisé.

Merci

Answer 1

même: utiliser vertical-align: middle.

body { 
    margin:0 auto; 
    color:white; 
    width: 100%; 
    display: table; 
} 
div#section1 { 
    height: 100vh; 
    background: black; 
    display: table-cell; 
    vertical-align: middle; 
} 
.center { 
    text-align: center; 
} 

Working Fiddle

Answer 2

Tout ce que vous devez faire est d'utiliser le bloc de code ci-dessous avec margin: auto; qui est importante là .. Reste, en jouant avec le positionnement CSS fera le travail pour vous.

Je ne pense pas qu'il y ait beaucoup à expliquer ici, assurez-vous d'utiliser position: relative; pour l'élément conteneur afin que votre absolute élément positionné reste correctement

div#section1 { 
    height: 20vh; 
    background: black; 
    width: 20vh; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
} 

Demo

Vous pouvez consulter my other answer ici qui vous expliquera d'autres techniques pour réaliser l'alignement vertical, parce qu'horizontal est tranquille facile en utilisant margin: auto;