How to center a Div across all Monitors/Resolutions/Browsers?

Question

Hello All,

I have created my own light box, the problem is that it shows centered on my monitor but not on wider monitors or bigger resolutions.

What is the best way to center a div across all resolutions/monitors/browers?

Answer 1

Try using this

Make parent div style as center and use margin: 0 auto; to the child div

#parentDiv{
text-align: center;
}

#main{
margin:0 auto;
width:755px;
text-align: left;
}

<div id="parentDiv"><div id="main">Content</div></div>

Answer 2

Centered horizontally, vertically or both? If you want both, this has worked for me in the past. Otherwise, the answer sathish posted is good for horizontal only centering

Answer 3

if you know the width:

<div></div>

div {
  left: 50%;
  margin-left: -50px; /* width / 2 */
  width: 100px;
}

Answer 4

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /must be half of the height/ 0 0 -200px; /must be half of the width/}

that will center the div horizontally and vertically. In relation to its first parent with the position:relative;

Answer 5

well if you set everything to be centered using

*{margin:0 auto;}

it will center anything in your document unless told otherwise

or you can use a wrapper div

div#wrapper {margin:0 auto;}

if your using older browser you should use

div#wrapper {text-align:center;}

there is like 30 ways of doing it, kinda depends on what your doing...

these are the most easy ones

Answer 6

Set a width on the div and then give it a centering class:

.center
{
margin:0 auto;
}

It will be centered in any browser.