Skip to content

Instantly share code, notes, and snippets.

@thebigtine

thebigtine/centerVertical.js

Last active February 6, 2017 17:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thebigtine/2456c82cca762b59fd320aa473b52dbe to your computer and use it in GitHub Desktop.
Save thebigtine/2456c82cca762b59fd320aa473b52dbe to your computer and use it in GitHub Desktop.
Download ZIP
A script that centers a element inside its parent
Raw
centerVertical.js
function centerVertical(child, parent, property) {
var parentHeight = parent.height(),
childHeight = child.height();
// Position the child with an inline style
child.css(property, (parentHeight - childHeight) / 2);
} centerVertical($('.js-vertical-align-child'), $('.js-vertical-align-parent'), 'margin-top');
@toothbrush7777777
Copy link

toothbrush7777777 commented Dec 8, 2016 •
edited by thebigtine

Just use this:

.child {
    position: relative;
    top: 50%;
    transform: perspective(1px) translate(0, -50%);
}

@toothbrush7777777
Copy link

Use translateY(…) instead of translate(0, …).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment