How to create a vertically and horizontally centered container in CSS
Tailwind.css
|
1 2 3 4 5 |
<div class="flex justify-center items-center"> <div class="m-auto"> {{ text }} </div> </div> |
Vanilla CSS HTML
|
1 2 3 4 5 |
<div class="wrapper"> <div class="content"> {{ text }} </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.wrapper{ /* You can change your style and height */ background-color:white; height:500px; /* But the structure has to be like this */ display: flex; justify-content:center; align-items: center; } .content{ margin:auto; } |