An Viewportbreite flexibel anpassende Zentrierung eines noscript-Hinweises

[Matthias Scharwies]

Servus!

Hallo Ryuno-Ki,

guter Link, danke.

Habe mich am Wochende noch etwas umgesehen im Web, aber bei CSS-tricks ist es recht systematisch zusammengefasst.

position in Kombi mit transform: translate() scheint eine der durchaus gängigen Methoden zu sein, ein Blockelement zu zentrieren.

Habe auch eine Abfrage bei caniuse zu transform - translate() gefunden, die 96,4% ergibt:

https://caniuse.com/mdn-css_types_transform-function_translate

Alle gängigen Browser unterstützen es seit geraumer Zeit. Geben tut es transform - translate seit 2015.

@Gunnar Bittersmann schrieb am Samstag:

Zentrieren mit position: absolute; left: 50%; transform: translate(-50%) hat man irgendwann mal so gemacht, als es noch kaum bessere Methoden dafür gab. Also so bis vor 5 Jahren.

Im SELF-Wiki gibt es einen Artikel, der neuer ist:

"Zentrierte Inhalte" leitet in der Suche auf:

CSS/Tutorials/Ausrichtung/Inhalte_zentrieren

.inhalte-werden-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav a {
    display: block;
    height: 100%;
    text-align: center;
    align-content: center;
}

Herzliche Grüße
Matthias Scharwies