Menu
What is the best pattern to align a semantic ui grid in the middle of the screen?
the css for this will ideal be this one.
.div{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; } But on semantic this dont look well with grids.
This is part of my html.
<div class="ui grid container"> <div class="ui center aligned three column grid"> <div class="column"> </div> <div class="column"> </div> </div> </div> 
276
This should work with any div or screen size:
.center-screen { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 100vh; } <html> <head> </head> <body> <div class="center-screen"> I'm in the center </div> </body> </html>See more details about flex here. This should work on most of the browsers, see compatibility matrix here.
Update: If you don't want the scroll bar, make min-height smaller, for example min-height: 95vh;
100
2018: CSS3
div{ position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } This is even shorter. For more information see this: CSS: Centering Things
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With