Solution 1 :

Update your container class like

.container {
  width: 90%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  position: absolute;
  top: 50%;
/*   transform: translateY(-50%); */

i.e remove transform property, it works exactly like you want.

Problem :

I’m making this accordion: but the problem is that when I click on one of the accordion item, the content expands and pushes the title up. I noticed that if the accordion is not vertically centered, then I get the result that I want but I need to center it.
I’ve added this code to the container in order to center it but it doesn’t work:

 position: absolute;
 top: 50%;
 transform: translateY(-50%)

If I remove those lines, the form will position on the top of the page and I’ll get the result that I want (without the container being in the center of the page)


Comment posted by Rod911

So what you need is, the accordion’s top side must stay in place when its height changes, even if it means that it will no longer be centered when expanded?

Comment posted by rafaelmd

@Rod911 I want the accordion’s top side to stay in the same place and I want it to be centered on the page. I’d like the container to grow downwards every time I click on an accordion item.

Comment posted by rafaelmd

Hi! Thanks for answering. That’s true but if I remove the transform property the accordion won’t be centered.

Comment posted by Hemant

try updating your top property to use calc in css like

Comment posted by rafaelmd

Thanks I came up with this solution: position: absolute; top: calc((viewport-height / 2) – container-height / 2); left: 50%; transform: translateX(-50%);

Comment posted by Hemant

Great, thanks for sharing the exact solution.