2015-07-04 1 views
6

Qual è il miglior patter per allineare una griglia semantica ui al centro dello schermo?Centro al centro dello schermo

il css per questo sarà ideale questo.

.div{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
} 

Ma sul semantico questo non sembra bene con le griglie.

Questo è parte del mio html.

<div class="ui grid container"> 
    <div class="ui center aligned three column grid"> 
     <div class="column"> 
     </div> 
     <div class="column"> 
     </div> 
     </div> 
    </div> 
+0

Vuoi entrambe le colonne centrate orizzontalmente e verticalmente? –

risposta

0

Prova questo:

div{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

Qui div è tag html. Hai scritto un tag html seguito da un punto errato. Solo una classe è scritta seguita da un punto.

9

Il modo migliore per allineare un div nel centro sia orizzontalmente che verticalmente sarà

HTML

<div></div> 

CSS:

div { 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 

FIDDLE

0

Il vostro codice è corretto che hai appena usato .div invece di div

HTML

<div class="ui grid container"> 
<div class="ui center aligned three column grid"> 
    <div class="column"> 
    </div> 
    <div class="column"> 
    </div> 
    </div> 

CSS

div{ 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -50px; 
width: 100px; 
height: 100px; 
} 

Dai un'occhiata a questo Fiddle

5

Questo dovrebbe funzionare per qualsiasi dimensione div:

.center-screen { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    min-height: 100vh; 
 
}
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="center-screen"> 
 
I'm in the center 
 
</div> 
 
</body> 
 
</html>

vedere più dettagli su flexhere.

+0

Ha funzionato come un fascino. Grazie. – Shashank

Problemi correlati