How to align div in center of a page?

Question

I want a div which is centered vertically and horizontally i.e. in the centre of a page. I tried position: absolute and making the div's top right bottom left 0! But the problem is when i zoom in the page it overlaps with other header and other divs! PLEASE HELP ME! How can i position the div at centre of a page without overlapping other divs while zooming in the page?

Like i have tried:

.center{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
 }

Oops! I forgot to mention margin: auto in my code. I tried that already but still doesn't work — Fred, Jul 20 '17 at 03:36
give this a try ... https://jsfiddle.net/DChandraShekhar/8a7L8dtv/1/ — Chandra Shekhar, Jul 20 '17 at 03:50
Possible duplicate of [Best way to center a
on a page vertically and horizontally?](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — handle, Apr 25 '18 at 10:25

score 7 · Answer 1 · answered Jul 20 '17 at 04:25

Try,

html{
  height:100%;
}
body
{ height:100%;
  background-color: #fcfcfc;

}
.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

<div class="center"></div>

score 4 · Answer 2 · answered Jul 20 '17 at 04:03

4

html, body {
  height:100%;
}

.center {
  border: 2px solid blue;
  margin: auto;
  position: relative;
  text-align: center;
  top: 50%;
  width: 20%;  
}

<div class="center">
  <p>Test Text</p>
</div>

answered Jul 20 '17 at 04:03

terryeah

583
5
17

score 2 · Answer 3 · answered Jul 20 '17 at 04:36

To horizontally center a block element (like div), use margin: auto

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

score 2 · Answer 4 · answered Jul 20 '17 at 04:42

2

Flex is the best solution, perfect position.

If you want this for a loader, just do a full size div with position fixed and use flex for the div content.

Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body, html {
  height:100%
}

body {
  display:flex;
  margin:0;
  flex-direction:column;
}

.mydiv {
  margin:auto;
}

<div class="mydiv">test</div>

answered Jul 20 '17 at 04:42

EyWN

137
7

I also think flex is the best solution for this. Just beware of some old browsers - it might need another solution for them. You probably shouldn't use flex on the body to avoid influencing all the other elements on your page. Instead, use it on a wrapper-div surrounding your to-be-centered div. Like

test
Give the wrapper 100% width and height and position fixed or absolute, as you prefer. – Ina Jul 20 '17 at 06:18
That still doesn't work! The div just overlaps with other elements while zooming the page! I want to fix it in its position – Fred Jul 20 '17 at 11:42

score 1 · Answer 5 · answered Jul 20 '17 at 04:06

1

Try This

HTML

<div class="center">
  Lorem ipsum dolor sit amet, 
</div>

CSS

html,body{
  height:100%;
}
.center{
  position: relative;
  top:50%;
  left:50%; 
}

Link for reference

Hope this Helps..

answered Jul 20 '17 at 04:06

Chandra Shekhar

3,550
2
14
22

score 1 · Answer 6 · answered Apr 22 '20 at 23:34

1

2020.4.23
coping from real project

    html, body {
        display:flex;
        height: 100%;
        width: 100%;
        margin: 0;
    }


<div id="id01" style="width: 50%;height: 30%;background-color: red; margin: auto;">
</div>

answered Apr 22 '20 at 23:34

CodeToLife

3,672
2
41
29

score 0 · Answer 7 · answered Jul 04 '19 at 16:28

This is Your HTML Body
<div class="testbox">  </div>

This is Your CSS
.testbox { width: 800px; margin: 0 auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

How to align div in center of a page?

7 Answers7

Linked