Flex zenrtiert

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Flex zenrtiert</title>
	<style>
	.container {
		 display: flex;
		align-items: center;
		justify-content: center;
		height: 100px;
		width: 200px;
		background:red;
	}
	div.green {
		background:green;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="green">Zentriert</div>
	</div>
</body>
</html>


 

            

Beschreibung

Mit "dispaly: flex;" wird das Element zum "Flex-Container". Wenn es eine definierte Höhe und Breite hat, kann sein Inhalt horizontal mit "justify-content:center;" vertikal mit "align-items: center;" zentriert werden.

DB-Table: flexzentriert