Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

How do I place a fixed div in center of my page?


Recommended Posts

Do you mean something like this?

.centerfloat { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, 0); 
}

 

  • Thanks 1

"Even if everyone agrees, everyone can be wrong."

Link to post
Share on other sites

Or the best code to use would be this.

.centerFloat {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}




If you want you can add a clear: both; to stop divs from floating around it. You can add some padding too. Flexbox seems to be the best method in this day and age. It's the best way to be responsive and almost everyone is starting to use it now instead of ordinary floats and positioning. Replace .centerFloat with the name of your div class.

Edited by TopSilver
Link to post
Share on other sites
On 7/17/2021 at 8:54 PM, Simon said:

Do you mean something like this?


.centerfloat { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, 0); 
}

 

That worked thanks! Couldn't figure out what code I needed to place it in the center...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. We use cookies and other tracking technologies to improve your browsing experience on our site, show personalized content, analyze site traffic, and understand where our audience is coming from. To find out more, please read our Privacy Policy. By choosing I Accept, you consent to our use of cookies and other tracking technologies.