CODEWITHSUNDEEP
csscss-position
Francisco Romero
Francisco Romero

Reputation: 13199

Center a div vertically/horizontally resizing it at the same time

As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.

I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).

I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).

Here is my code:

HTML:

<div id="wrapper">
     <div id="content">
     </div>
</div>

CSS:

html{
   width: 100%;
}

body{
    width: 100%;
    background-color: red;
    margin: 0;
}

#wrapper{
    position: absolute;
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

#content{
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    background-color: yellow;
}

JSFiddle.

I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.

Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.

How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?

EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.

Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.

EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.

Thanks in advance!

Upvotes: 0

Views: 1642

Answers (2)

service-paradis
service-paradis

Reputation: 3398

You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.

I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.

#content{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

You can see your updated jsfiddle

EDIT

I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.

You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:

#content{
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

See this updated jsfiddle.

Upvotes: 2

ryantdecker
ryantdecker

Reputation: 1810

Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:

https://jsfiddle.net/puajxgsz/

Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:

https://jsfiddle.net/j0ch7oxj/

Upvotes: 0

Related Questions