Grenth: Nachteile bei Horizontal und Vertikal zentrieren per flex-Box?

Beitrag lesen

SELF-Forum

Nachteile bei Horizontal und Vertikal zentrieren per flex-Box?

Grenth
– Informationen zu den Bewertungsregeln

Ich hab nach einer Möglichkeit gesucht wie ich einen Wrapper zentrieren kann ohne umständliche Angaben mit Breite oder Höhe -50% oder festgelegte Höhen oder Einschränkungen auf mobilen Endgeräten ohne media-query oder oder oder... Irgendwas hat mich bei fast jeder Lösung gestört.
Ich habe mir jetzt überlegt, dass man das doch eigentlich auch mit einer Flexbox lösen könnte.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Zentrierung mit Flex-Boxen</title>  
<style type="text/css">  
html {  
    text-align: center;	  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 100%;  
    background-image: -moz-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);  
    background-image: -webkit-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);  
    background-image: -ms-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);  
    background-image: -o-linear-gradient(top, #DDDDDD 0%, #FFFFFF 50%);  
}  
html, body {  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
body {  
    color: #262626;  
    margin: 0 auto;  
    width: 400px;  
    max-width: 60%;  
    display: -webkit-flex;  
    display: flex;  
    align-items: center;  
    text-align: left;  
}  
#wrapper{  
    background: #f0ebc0;  
    -webkit-flex-basis: 100%;  
    flex-basis: 100%;  
    min-height: 5em;  
    max-height: 100%;  
    box-shadow: 0px 0px 5px 2px #C3C3C3;  
}  
#wrapper * {  
    padding: 5px;  
    margin: 0;  
}  
h1 {  
    font-size: 1.2em;  
    background: #fff;  
    border-bottom: 1px solid #c3c3c3;  
}  
h2 {  
    font-size: 1em;  
    border-bottom: 2px dotted #c3c3c3;  
}  
h3 {  
    font-size: 1em;  
}  
a {  
    font-size: 0.8em;  
    background: #fff;  
    display: block;  
    border-top: 1px solid #c3c3c3;  
    text-align: right;  
}  
</style>  
</head>  
<body>  
<div id="wrapper">  
    <h1>Header 1</h1>  
    <h2>Header 2</h2>  
    <h3>Header 3</h3>  
    <p>tons of text. uhm.. or not</p>  
    <a href="#">Zentrierung mit Flex-Boxen</a>  
</div>  
</body>  
</html>

Was haltet ihr davon? Gibt es bei dieser Variante Nachteile (abgesehen von der Unterstützung in älteren Browsern) oder sogar Vorteile?

Ich fand die Lösung ziemlich kurz und "angenehm" was den Quelltext und das CSS angeht. Nimmt man die Angaben zu Farben, Rändern und Schriftgrößen weg, ist der Code doch recht schlank und es scheint auch alles wunderbar zu funktionieren.

Beitrag melden
–
Informationen zu den Bewertungsregeln