CODEWITHSUNDEEP
htmlcss
ca1944
ca1944

Reputation: 3

How to keep the center of a page in the center of a resized screen at all times

I want the exact center of my page to be in the center of the page when the browser is resized, for example if my content is 100% of the screen, whatever is at 50% vertically should be in the center when I make the screen thinner.

This is what my CSS looks like:

Style.CSS

.container{
    width: 1400px;

}
body{
    background-image: url("../images/background.png");
    background-color:ffffff;
    margin-bottom:50px;

}

#border{
    width: 50%; 
    height:auto;
    border: 5px solid #147b8a;
    border-style:ridge;
    margin-top: 0px;
    margin-bottom: 0px;
    background: rgba(238, 238, 238, 0.9);
    border-radius:30px;
    }

Does anyone know a way to do what I want to do? the reason I want to do it is for a log in form that is in the center of the page when the browser is max size, but when the browser is only half the screen's width, you can only see half of the login form and i'd like it to reposition so it is in the center of the resized browser. Thanks

Upvotes: 0

Views: 49

Answers (2)

Mazhar
Mazhar

Reputation: 575

For doing so, always use % units and leave the margin, padding or border to be auto or define it with % units too. 

<body>
  <div class="cenDiv">
  Hello. 
  <div>
</body>

CSS code

.cenDiv {
  width:80%;
  height:80%;
  margin:auto;
}

Use % unit for assigning values whenever you want your layout to be synchronize with zoom.

Upvotes: 0

jpschroeder
jpschroeder

Reputation: 6916

You can use a combination of position absolute and translateX/Y to do this:

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

top and left use the parent as context for positioning, while translate bases its manipulations off the element itself.

Example here: http://codepen.io/anon/pen/QjJJZw

Upvotes: 1

Related Questions