Centrer une div dans Skeleton

Question

Pour un de mes projets, j'utilise Skeleton Boilerplate pour la première fois. Et je suis à la recherche de la meilleure pratique pour centrer un div dans Skeleton sans pour autant entrer dans les règles de Skeleton.

Pour l'instant, j'ai la structure suivante pour une page de connexion.

HTML:

<div class="container"> 
<div class="sixteen columns vertical-offset-by-one"> 
<div id="loginBox"> 
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" /> 
<form action="" id="loginForm"> 
<input type="text" name="username" required placeholder="username" class="loginTextField"> 
<input type="password" name="password" required placeholder="password" class="loginTextField"> 
<input type="submit" value="Log In" class="loginButton" /> 
</form> 
</div><!-- loginBox --> 

</div><!-- sixteen columns --> 

<div class="sixteen columns"> 
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p> 
</div> 
</div><!-- container --> 

CSS:

#loginBox, #registrationBox { 
    width: 470px; 
    height: 450px; 
    background-color: white; 
    left: 245px; */ 
    top: 20px; */ 
    position: relative; 
    margin: 0px auto; } 

#registrationBox { 
    height: 500px; } 

.yeditepeLogo { 
    position: relative; 
    left: 40px; 
    top: 33px; } 

#loginForm, #registrationForm { 
    position: relative; 
    top: 45px; } 

.loginTextField, .registrationTextField { 
    position: relative; 
    height: 40px; 
    width: 388px; 
    left: 40px; 
    border-color: #dedede; 
    border-style: solid; 
    border-width: 1px; 
    margin-bottom: 10px; 
    text-align: left; 
    font-size: 18px; 
    text-indent: 10px; 
    -webkit-appearance: none; } 

.loginTextField:focus, .registrationTextField:focus { 
    outline-color: #ff9800; 
    outline-style: solid; 
    outline-width: 1px; 
    border-color: white; } 

.loginTextField:nth-child(2), .registrationTextField:nth-child(3) { 
    margin-bottom: 40px; } 

.loginButton, .registrationButton { 
    background-color: #77a942; 
    position: relative; 
    border: none; 
    width: 390px; 
    height: 60px; 
    left: 40px; 
    color: white; 
    font-size: 24px; 
    text-align: center; 
    opacity: 0.8; } 
    .loginButton:hover, .registrationButton:hover { 
    opacity: 1; } 

Comme vous pouvez le voir, ce #loginBox a une largeur fixe/hauteur et il devrait toujours être au centre de la page. marge: le code auto 0px lui donne le centrage horizontal. Mais est-ce la meilleure pratique dans Skeleton? Skeleton fournit-il un meilleur moyen?

Comment puis-je fournir son centrage vertical?

Answer 1

Vous pouvez définir le récipient pour

.container { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-left: -43 //replace with half of the width of the container 
      margin-top: -52 //replace with half of the height of the container 
} 

fixer le conteneur parent ou de l'élément de position: relative;

est ici un bon article sur How to Center Anything With CSS

Answer 2

Je sais que cela a été un moment que cette question a été posée, mais peut-être que quelqu'un d'autre peut utiliser la réponse. J'ai été capable d'effectuer un centrage avec Skeleton en remplissant un tiers de classe de colonne avec un espace, puis la classe de tiers d'un tiers avec du contenu, puis une autre classe de troisième colonne avec un espace à nouveau.

<div class="one-third column">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column">&nbsp;</div> 

Answer 3

Il existe en fait un moyen de centrer les divs dans Skeleton.

<div class="sixteen columns"> 
    <div class="four columns offset-by-six"> 
     <p>Lorem ipsum dolor sit amet.</p> 
    </div> 
</div> 

Le décalage par six dans ce cas peut être modifiée une à quinze, et compense la colonne à la main par autant de colonnes que entrée. En tant que caractéristique intéressante, le décalage n'affecte pas l'alignement lorsque des écrans plus petits sont utilisés.

Pour clarifier: Cela ne centre pas le contenu réel dans le div, mais centre le div lui-même.

Answer 4

La réponse d'Asus3000 est bonne car c'est ce que je fais et ça marche bien. Je voudrais seulement ajouter que sur le mobile, il ajoute un peu d'espace vertical indésirable. Pour éviter l'espace vertical mobile, j'utilise un class .filler et le cache sur un mobile.

HTML

<div class="one-third column filler">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column filler">&nbsp;</div> 

CSS

/* or whatever mobile viewport */ 
@media only screen and (max-width: 960px) { 
    .filler { display: none} 
} 

Answer 5

Une façon je crois fonctionne assez bien est:

<div class="container"> 
    <div class="row"> 
    <div class="two-half column"> 
    centered div content 
    </div> 
    </div> 
    </div> 

Cela rend le div centré et réactif. Vous pouvez changer margin-top pour le faire au milieu, mais changer la largeur ne le fera pas (bien sûr) plus centré.

-moi si je me trompe, mais cela fonctionne pour moi! :)