Geek Answers Handbook

Center div in the middle of the page using css

I want to center the div right in the middle of the page, I tried top:30% , but when the window changed from alignment.

 <div id=cent></div>

Thanks jean

+7
css
source share
8 answers

If you know the height / width of this div (for example, it will be 100px X 200px), you can do it like this:

 #cent { position:absolute; top:50%; left:50%; margin-top:-50px; /* this is half the height of your div*/ margin-left:-100px; /*this is half of width of your div*/ }

UPDATE: another option: see http://www.w3.org/Style/Examples/007/center (vertical centering)

+16
source share

Adding notes to a naive link (to the w3c tips site): display:table-cell does not work with height:100% . So, if you want to vertically center an element that you don’t know its height on the page, you must place it inside the container with display:table and height:100% , and another container with display:table-cell and vertical-align:middle .

In addition, if you want to center it horizontally, you need to specify width:100% on the body, the outer container and give text-align:center inner container. The content should have display:inline-block and reset alignment, text-align:left .

Ultimately, it becomes:

 <style> #vcontainer { display: table; height: 100%; width: 100%; } #hcontainer { display: table-cell; vertical-align: middle; text-align: center; } #content { display: inline-block; border: lightGray 1px solid; background-color: lightBlue; text-align: left; } </style> <body> <div id="vcontainer"><div id="hcontainer"> <div id="content"> Hoyjo!<br> I have returned to my hometown!<br> Lolololo lololo lololo lololo lololo!<br> </div> </div></div> </body>

I can not guarantee that it will work on older browsers (IE6 / 7). It will work on IE8 provided that it will work on IE8 standards (yes, it will overshadow your mind. Thanks, MS!), And you should give <html> and <body> height:100% .

+1
source share

HTML:

 <div id="box"></div>

CSS:

 #box{ background-color: green; width:100px; height:100px; margin:auto; /*This will center it horizontally but not vertically*/ }

Beware of quotes or double quotes around the id field, you need them.

+1
source share
  <div id="content" style="text-align: center; vertical-align: middle; border-color: #000000; border-width: 1px; border-style: solid; margin-top: 25%; margin-bottom: 25%;"> hi </div>

It worked for me ...

Edit: this will align the whole div ... regardless of the size of the div or page ... Assuming that this id is the only div on the whole page ...

0
source share

If you want the upper middle:
HTML:

 <div class="cent"> <!-- code --> </div>

CSS:

 .cent { align: center; }

and if you need a straight middle, use the same HTML, but change the CSS to:

 .cent { align: center; position: absolute; top: 40%; left: 45%; }

Sample code: jsfiddle.net/Lzdvnk29 (it may not look centered if you
look at this, but if it is a full HTML page, it will be displayed in the middle)

0
source share

I know that this issue is 9 years old, but if I stumbled upon it 9 years later, maybe someone else could do the same.

This is my working solution:

 #cent { position: absolute; width: 500px; height: 500px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

In doing so, it will set the width and height to 500px, then set the top , left , right and bottom constraints to 0, and finally, setting the auto fields, the box will be placed exactly in the middle of the window. It will also be responsive.

0
source share

Here's how:

 #cent { margin-left:50px; margin-right:50px; }

Now your div will be 50px left and right and centered in any container in which you placed it.

-one
source share
 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
-one
source share

More articles:


All Articles