Centro al centro dello schermo

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>

fonte

2015-07-04 carloss medranoo

Vuoi entrambe le colonne centrate orizzontalmente e verticalmente? –

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.

fonte

2015-07-04 05:40:22

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

fonte

2015-07-04 05:47:48 Hemal

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

fonte

2015-07-04 07:51:29 Malik

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.

fonte

2017-12-30 02:14:28 Caner

Ha funzionato come un fascino. Grazie. – Shashank

Centro al centro dello schermo

risposta

Problemi correlati