wake-up-neo.com

mitte h1 in der Mitte des Bildschirms

Wie kann ich einen Text horizontal und vertikal zentrieren? Ich möchte Position absolut nicht verwenden, weil ich es versuche und mein anderes Div schlechter wird. Gibt es einen anderen Weg, das zu tun?

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

htmlcsstext-align
10
Dina

sie können Display Flex verwenden. Dies ermöglicht einen Flex-Kontext für alle direkten Kinder. Mit der Flex-Richtung wird die Hauptachse festgelegt. Dadurch wird die Richtung festgelegt, in der Flex-Elemente im Flex-Container platziert werden

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

Tun Sie dies einfach, was in jedem Browser funktioniert:

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

Die line-height-Eigenschaft gibt die Zeilenhöhe an (wobei sie vertikal zentriert wird), und der text-align:center platziert sie direkt horizontal in der Mitte.

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

Mit position: fixed setzen Sie die Position auf einen festen Wert und mit top und left beide auf 50%, erhalten Sie sie in der Mitte des Bildschirms.

Viel Glück beim Codieren!

Hier finden Sie weitere Informationen: 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