Center a div that is wider than the screen

How can I go about centering a div that is wider than the screen? For example, if a screen’s horizontal resolution is 1024px and I have a div that is 1500px wide, how can I have the center of the div align with the center of the screen?

This is easy with javascript, but there has to be a pure html solution. I just can’t figure it out. Thanks.

There is a solution for centering divisions in css. It’s


div{margin: 0 auto;}

I can’t help but wonder why your division is wider than most anyone can see it?

That will only work if I explicitly give the parent element a width that is wider than that of the div I’m trying to center.

Here is an example of what I’m trying to achieve. The header is actually 1920px wide, but manages to stay centered regardless of the size I make the browser window.

I can’t wrap my head around what this author used to make it work.

Hey I found your post googling the same problem, then realised a simple fix.

Put your header in a div 100% width, put your image as the background of that div and set it to center, and voila! :slight_smile:

Hope this helps.