KPC
Kevin Powell - Community•3mo ago
NefariousApe

get div to be center of screen

how can i get a div to be centered on the screen and should stay fixed there?
6 Replies
Tenkes
Tenkes•3mo ago
Use position: fixed in css
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3mo ago
.classname {
  position:fixed;
  top:50%;
  left:50%;
  translate:-50% -50%;
}
.classname {
  position:fixed;
  top:50%;
  left:50%;
  translate:-50% -50%;
}
NefariousApe
NefariousApe•3mo ago
ok i think its center hard to tell, but why does 50% work i thought doing top and left 50% would cause its top left corner to be center, ie all of it would be in the 4quadrant
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3mo ago
If you only use top:50%; and left:50%; then it will put the top left corner of the box to be exactly in the center of the screen, so you have to use translate to move it 50% of it's own width back to the left and move it 50% of it's own height up, so then it will be perfectly centered
NefariousApe
NefariousApe•3mo ago
oh interesting, thank you!
Chris Bolson
Chris Bolson•3mo ago
Another method is to use inset and margin: 
.fixed-center{
  position: fixed;
  inset: 0;
  margin: auto;
}
.fixed-center{
  position: fixed;
  inset: 0;
  margin: auto;
}
Want results from more Discord servers?
Add your server
More Posts
make this look less badthis is a country leaderboard for a geoguesser game. Not sure how I feel about the medal emojishow to make text responsive?please i struggle with this i already done with my ui just the responsiveness, i use json as dynamicGorgeous accordionhttps://codepen.io/stoumann/pen/ExydEYLHow can I bind mouse wheel to the scroll-bar in a overflow-x scroll?I have a div which contains 10 elements. I made the div a flex and overflow-x scroll. But when I hovnew java script bug ! help~~~js <script> function submiter(){ let number = document.getElementById('numba'Login Redirecthow to make a login button that when clicked takes you to discord access page.Your thought processI often spend far too long trying to work out which way to address a layout, should it be flex or grReferenceError: Request is not defined -while setting up sveltekit project```js ReferenceError: Request is not defined at getRequest (file:///C:/Users/welcome/Desktop/Ed/i want to do this design of cards stackinghttps://ui.dev/ Can someone give me brief guide how can i achive thishow to do the design for this containerhey guys, i wanna ask if anyone is familiar with how to make a navbar with this sort of styling (the