web-dev-qa-db-fra.com

centre h1 au milieu de l'écran

Comment centrer horizontalement et verticalement un texte? Je ne veux pas utiliser la position absolue parce que j'essaie avec cela et que mon autre div s'aggrave. Y a-t-il une autre façon de faire ça?

div {
    height: 400px;
    width: 800px;
    background: red;
}
<div>
    <h1>This is title</h1>
</div>

htmlcsstext-align
10
Dina

vous pouvez utiliser display flex, il permet un contexte de flexion pour tous ses enfants directs et, avec la direction de flexion, établit l'axe principal, définissant ainsi la direction. Les éléments flexibles sont placés dans le conteneur flexible.

div{
  height: 400px;
  width: 800px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
9
Gintoki

Faites juste ceci, qui fonctionne sur tous les navigateurs:

div{
     height: 400px;
     width: 800px;
     background: red;
     line-height: 400px;
     text-align: center;
}

La propriété line-height spécifie la hauteur de la ligne (qui la centre verticalement) et la text-align:center la place directement au centre horizontalement.

2
Kris
<div>
  <style>
div {
  position: fixed;
  top: 50%;
  left: 50%;
}</style>
<h1>This is title</h1>
</div>

Avec position: fixed, vous définissez la position sur une valeur fixe et avec top et left tous les deux définis sur 50%, vous l'obtiendrez au milieu de l'écran.

Bonne chance à coder!

Voici quelques informations supplémentaires: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

0
J_from_Holland

.container {
    display: table;
}
.centered {
    display: table-cell;
      height: 400px;
      width: 800px;
      background: red;
    text-align: center;
    vertical-align: middle;
    }
<div class="container">
<div class="centered">
  <h1>This is title</h1>
</div>
</div>

0
Steve Harris