Centrare un div in Skeleton

Question

Per un mio progetto, sto usando Skeleton Boilerplate per la prima volta. E sto cercando la migliore pratica di centrare un div in Skeleton senza colpire le regole di Skeleton.

Al momento, ho la seguente struttura per una pagina di accesso.

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; } 

Come si può vedere, che #loginBox ha una larghezza/altezza fissa e dovrebbe essere sempre al centro della pagina. margine: il codice auto 0px gli dà il centraggio orizzontale. Ma è la migliore pratica in Skeleton? Skeleton fornisce un modo migliore?

Inoltre, come posso fornire il suo centraggio verticale?

Answer 1

È possibile impostare il contenitore per

.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 
} 

impostare il contenitore padre o elemento per position: relative;

Ecco un buon articolo su How to Center Anything With CSS

Answer 2

So che è stato un po 'che questa domanda è stato chiesto, ma forse qualcun altro può utilizzare la risposta. Sono riuscito a centrare con Skeleton riempiendo una classe di terza colonna con uno spazio, quindi la classe successiva di un terzo della colonna con il contenuto, quindi un'altra classe di una terza colonna con uno spazio ancora.

<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

C'è in realtà un modo integrato di centrare i div in Skeleton.

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

L'offset-by-sei in questo caso può essere alterato da uno a quindici, e compensa la colonna a mano da un numero di colonne inserito. Come caratteristica precisa, la compensazione non influisce sull'allineamento quando si utilizzano schermi più piccoli.

Per chiarire: questo non concentra il contenuto effettivo nel div, ma centra il div stesso.

Answer 4

La risposta di Asus3000 è buona in quanto è ciò che faccio e funziona bene. Lo aggiungerei solo sul cellulare, aggiunge un po 'di spazio verticale indesiderato. Per evitare lo spazio verticale mobile, utilizzo un class .filler e lo nascondo sui dispositivi mobili.

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

Un modo credo che funziona piuttosto bene è:

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

Questo rende il div centrato e reattivo. Puoi cambiare margine in alto per arrivare fino in fondo, tuttavia cambiare larghezza (ovviamente) non renderlo più centrato.

Correggimi se sbaglio ma questo funziona per me! :)