Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center a DIV to the center of page regardless of screen size

I want to center the below div container to that the site appears in the center of the page, regardless of the screen size.

http://penarthpc.com/~droneboy/

I've played around a little bit but appear to be missing something.

like image 510
dan4duk Avatar asked Aug 29 '13 12:08

dan4duk


People also ask

How do I make my div always centered on the page?

To center a div horizontally on a page, simply set the width of the element and the margin property to auto.

How do I center a fixed div to screen?

If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

How do I center a div with perfectly CSS?

One way to center a Div in CSS is to set the position to absolute and set the left and right property values to 50% which will move the div to the center.

How do I center a div without margin auto?

Div is basically BLOCK with FULL-WIDTH (100%) so set margin:auto is doesn't get anything since the width is full to the parent. To make it work, you can did that by 2 ways, use text-align:center for div -> this will align text inside div center. include width property in div (i.e. width:200px) and it will work fine.


1 Answers

The solution to this problem is using auto for margin in the CSS AND providing some width to the DIV itself:

div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}
like image 119
a.ahmed Avatar answered Sep 21 '22 02:09

a.ahmed