Depot43-Unterlagen - Flex einmitten

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Flex einmitten</title>
	<style>
        * {
            margin:0;
            padding:0;
        }
		body {
			display:flex;
			height:100vh;
		}
		div.mitte {
			align-self:center;
			background-color: #f90;
			height: 150px;
			width:150px;
			margin: auto;
		}
	</style>
</head>
<body>
    <div class="mitte">
		<p>Dieser Container ist eingemittet. Horizontal und vertikal.</p>
    </div>
</body>
</html>


 

            

Beschreibung

Body: Um ein Element horizontal und vertikal zu zentrieren wird der "body" wird als Flex-Container "display:flex;" verwendet. Die Ränder Margin und Padding werden auf 0 gesetzt. Die Höhe wird dem Browserfenster angepasst (auch wenn es so aussieht, nimmt der Body die Höhe seines Inhalt an, nicht die des Browserfensters). Die CSS-Eigenschaft "height:100vh;" gibt dem Body die Höhe des Browserfensters (View-Height).

Div-Element: Es kann eine beliebige Grösse (Pixel oder Prozent) haben. Vertikal wird es mit "margin:auto;" zentriert, dabei wird rechts und links der gleche Aussenrand erzwungen. Horizontal wird die Flex-Eigenschaft "align-self: center;" verwendet.