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

Question

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.

_regardless of the screen size_ If it includes mobile phones also, use **Media Queries**. — Nitesh, Aug 29 '13 at 12:25
Post some HTML/CSS or else no one knows what the problem is... — Marc Audet, Aug 29 '13 at 12:30
look at this : http://www.yourinspirationweb.com/en/css-tips-how-to-center-an-element/ — medBouzid, Aug 29 '13 at 12:38

score 14 · Answer 1 · answered Aug 29 '13 at 12:35

14

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%;
}

answered Aug 29 '13 at 12:35

a.ahmed

178
7

score 6 · Answer 2 · answered Aug 29 '13 at 12:32

6

Easiest way to center something regardless of page width is margin: auto; in your CSS, with height and width defined.

.class {
    height: 50px;
    width: 50px;
    margin: auto;
}

JSFiddle: http://jsfiddle.net/rVXBH/

answered Aug 29 '13 at 12:32

Tricky12

6,752
1
27
35

score 4 · Answer 3 · answered Aug 29 '13 at 12:28

.center-div {
   width: 600px;
   height: 600px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -300px;
   margin-top: -300px;
}

This will center your DIV with class center-div horizontally AND vertically. The margin-left must be negative half of what your width is. The margin-top must be negative half the height.

To just center horizontally:

.center-div {
   width: 600px;
   height: 600px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

score 2 · Answer 4 · answered Aug 29 '13 at 13:21

2

simple. Just give the container margin of "0 auto"

margin: 0 auto;

answered Aug 29 '13 at 13:21

Atif

821
2
10
15

score 1 · Answer 5 · edited May 23 '17 at 12:25

1

if you want to center the container (vertical) :

vertical centering with css

if (horizontal) look at this :

how-do-you-easily-horizontally-center-a-div

edited May 23 '17 at 12:25

Community

1
1

answered Aug 29 '13 at 12:47

medBouzid

7,484
10
56
86

Dharma Raju · Answer 6 · 2018-10-30T09:14:10.130

1

Below code will work for any screen size.

div.centered {
   background-color: rgb(18, 80, 144);
   height: 100vh;
}
div.centered span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: rgb(250, 255, 255);
}

<div class="centered">
 <span>Center</span>
</div>

edited Oct 30 '18 at 09:14

answered Oct 22 '18 at 17:22

Dharma Raju

51
2

what if the content in the div is an image? How then would it be centered? – dan4duk Oct 24 '18 at 15:07
based on the image size reduce left percentage. – Dharma Raju Oct 25 '18 at 17:40
I have updated the CSS to fit for both image and text. – Dharma Raju Oct 30 '18 at 09:15

score 0 · Answer 7 · answered Aug 29 '13 at 12:40

Here is a great method I use, it makes use of a before selector to create a invisible div that takes care of the vertical alignment:

HTML:

<body>
    <div id="outter-div">
        <div id="aligned">
            <h1>A Nice Title</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
        </div>
    </div>
</body>

CSS:

/* This parent can be any width and height */
#outter-div {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
#outter-div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
#aligned{
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

This can be found on this post which also has a demo on jsbin!

score 0 · Answer 8 · answered Jan 22 '20 at 09:06

0

CSS below to center any element :

div.className {

text-align: center;

}

answered Jan 22 '20 at 09:06

Vishwanath

176
1
14

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

8 Answers8