Centrar o div no meio do ecrã
Qual é o melhor padrão para alinhar uma grade de ui semântica no meio da tela?
o css para isto será ideal para este.
.div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Mas em semântica isto não parece bem com as grelhas.
Isto faz parte do meu html.
<div class="ui grid container">
<div class="ui center aligned three column grid">
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
17
5 answers
Isto deve funcionar com qualquer div
ou tamanho do ecrã:
.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>
Ver mais detalhes sobre flex
toma.
23
Author: Caner, 2018-04-10 13:17:52
A melhor maneira de alinhar um div no centro tanto na horizontal como na vertical será
HTML
<div></div>
CSS:
div {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: blue;
}
12
Author: Hemal, 2015-07-04 05:47:48
2018: CSS3
div{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Isto é ainda mais curto. Para mais informações, consulte o seguinte: CSS: centralizar as coisas
10
Author: Nixen85, 2018-06-19 09:58:08
Tenta isto:
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background: red;
}
Aqui div é tag html. Você escreveu uma tag html seguida por um ponto que está errado.Somente uma classe é escrita seguida por dot.
0
Author: Abdus Sattar Bhuiyan, 2015-07-04 05:40:22
O seu código está correcto acabou de usar .div
em vez de 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;
}
Olha para isto. Violino
0
Author: Malik, 2015-07-04 07:51:29