Div-Container mittig platzieren

Hallo Community, ich habe ein Problem und komme einfach nicht dahinter. Ich möchte gerne den roten DIV-Container ("Roter Block") zentriert haben. Was mache ich falsch?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<html> <head> <style> body{ display:flex; flex-direction:column; } main { display: flex; flex-direction: column; width: 100%; min-height: 200px; align-items: center; } .rot{ width:300px; height:100px; background:red; text-align:center; } </style> </head> <body> <main> <p>Mittiger Text</p> <div class="rot"> Roter Block</div> </main> </body> </html>