/    Sign up×
Community /Pin to ProfileBookmark

vertically center with CSS

Copy linkTweet thisAlerts:
May 10.2019

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 …

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogMay 10.2019 — [[58],[2,8]]
Copy linkTweet thisAlerts:
@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:

https://codepen.io/Sempervivum/pen/gJrZWB?editors=1100
Copy linkTweet thisAlerts:
@codyhillauthorMay 11.2019 — @Sempervivum#1603580

Thank you alot !! Now I can center the text in the card but I cant center the card
Copy linkTweet thisAlerts:
@codyhillauthorMay 11.2019 — @Sempervivum#1603580

I found a way ... I added this to the card container

perspective: 700;

position: absolute;

top: 50%;

left: 50%;

margin-right: -50%;

transform: translate(-50%, -50%);

display: flex;

align-items: center;

I dont know why it works but it does.

Copy linkTweet thisAlerts:
@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:

https://codepen.io/Sempervivum/pen/dEXyzM?editors=1100

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
Copy linkTweet thisAlerts:
@codyhillauthorMay 12.2019 — @Sempervivum#1603596

Thank you so much !

this is the final version

https://codepen.io/raul-rogojan/pen/YbWpyd

The hover is a bit glitchy , is there a way I can fix it ?
Copy linkTweet thisAlerts:
@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
Copy linkTweet thisAlerts:
@codyhillauthorMay 12.2019 — @Sempervivum#1603612

thanks !
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...