How do I keep my wrapper remain centered when zooming in and out?

Profile picture for OlegArsyonov
OlegArsyonov

The problem is my layout does not break on zoom out or in, it just wraps to the left, so at the smallest zoom you would see my layout in the leftmost part of the browser screen. While I want my layout to decrease in size but not float left. I want it to remain centered perfectly all the time every single zoom.

How do I do that?

<!-- language: lang-html --> 
<body class="body">
    <div class="wrapper">/</div>
    <script src="js/jquery.js" type="text/javascript"></script>
</body>
<!-- language: lang-css --> 
 .body {
     position: absolue;
     top: 0%;
     margin: 0 auto;
     width: 1366px;
     height: 768px;
     background: white;
 }
 .wrapper {
     position: absolute;
     left: 20%;
     right: 20%;
     margin: 0 auto;
     min-height: 100%;
     background: black;
 }

I'm not sure what isn't working about your code.

Here's an example of the code you provided in jsFiddle which appears to be centering fine at any zoom level.

Working Demo in Fiddle

screenshot

Traditionally the trick to centering a div is margin: 0 auto;

But you're doing that, so I think you're okay.

Is there any other formatting you have that is interfering? Can you provide more info?