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.
I’m making this accordion: https://codepen.io/rafaelmollad/pen/JjRZbeW 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)
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?
@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.
Hi! Thanks for answering. That’s true but if I remove the transform property the accordion won’t be centered.
try updating your top property to use calc in css like
Thanks I came up with this solution: position: absolute; top: calc((viewport-height / 2) – container-height / 2); left: 50%; transform: translateX(-50%);
Great, thanks for sharing the exact solution.