How to align div in center of a page?

user_8091107 0
Viewed 29506

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;
 }
css
7 Answers

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>
user_10181540

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

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

user_72415350
Related