web-dev-qa-db-fra.com

Centre div au milieu de l'écran

Quel est le meilleur modèle pour aligner une grille d'interface utilisateur sémantique au milieu de l'écran?

le css pour ce sera idéal soit celui-ci.

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

Mais sur la sémantique, cela ne va pas avec les grilles.

Cela fait partie de mon HTML.

 <div class="ui grid container">
    <div class="ui center aligned three column grid">
      <div class="column">
      </div>
      <div class="column">
        </div>
      </div>
  </div>
csscss3semantic-ui
27
carloss medranoo

Cela devrait fonctionner avec n'importe quelle div ou taille d'écran:

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

Voir plus de détails sur flexici . Cela devrait fonctionner sur la plupart des navigateurs, voir la matrice de compatibilité ici .

48
Caner

La meilleure façon d’aligner une div au centre horizontalement et verticalement sera

HTML

<div></div>

CSS:

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

VIOLON

16
Hemal

2018: CSS3

div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

C'est encore plus court. Pour plus d'informations, voir ceci: CSS: Centrer des choses

16
Nixen85

Votre code est correct, vous venez d'utiliser .div au lieu 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;
}

Découvrez ceci Fiddle

0
Malik Naik

Essaye ça:

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

Ici, div est une balise html. Vous avez écrit une balise HTML suivie d'un point erroné. Seule une classe est écrite suivie d'un point.

0
Abdus Sattar Bhuiyan