I am trying to make a card flip https://codepen.io/raul-rogojan/pen/OYNBXV?editors=1100 The problem is that I cant vertically center neither the card neither the text within the card. I tried everything . Flex , grid , margin …
@SempervivumMay 10.2019 — #Flex is the best approach for aligning items vertically. The reason why it doesn't work for you is: You didn't specify a height for the inner container .back. Thus it adjusts it's height to the content inside, so that there is no space left for aligning. Set the height to 100% and everything will be fine:
@SempervivumMay 11.2019 — #Good job! This is another common way of centering an object which is needed when it's positioned absolutely. However centering the card container can done by flex either:
In this case it's necessary again to set the size of the container, here to 100vh which is the height of the vieport.
BTW: For the 3D effect to work you only need to add a unit to the perspective: .card-container { perspective: 700px; transform-style: preserve-3d; } https://codepen.io/Sempervivum/pen/dEXyzM?editors=1100
@SempervivumMay 12.2019 — #The hover is a bit glitchy , is there a way I can fix it ?[/quote] Try if adding the hover to .container fixes it: .container:hover .card { transform: rotateY(180deg); } https://codepen.io/Sempervivum/pen/LoZXwZ