How to make a fixed position centered after zooming the whole website out?

Question

I am very new to web design HTML/CSS and we are asked to make a simple website for our school project, I saw a layout and liked the idea. here's the link: http://theme-frsch2.tumblr.com/

I'm having a problem on how to make the left part (the fixed part) stays on the center of the page when zooming out the browser(CTRL-/+). Can someone help me on how to make this possible?

I have made some progress, and used position fixed on the left part so that it will stays on screen even after scrolling but the thing is it sticks to the top when I tried zooming out the browser.

Answer 1

Just use the css from the site you referenced.

  <div id="container"> <!-- horizontal centering (margin:auto) -->
    <div class="sidebar"> <!-- keep in screen when zooming (position:fixed) -->
      <div class="logo"> <!-- vertical centering (height 50% of 100%) -->
       <div class="something"> <!-- rearrange position (position absolute) -->
       </div> 
      </div>
    </div>
   </div>

#container {
    margin: auto;
    width: 860px;
}
.sidebar { 
    width: 400px;
    position: fixed;
    height: 100%;
}
.logo {
    height: 50%;
    position: relative;
    top: 0;
}
.something {
    position:absolute;
}