Vertical Align Methods

Question

What are the best methods to vertically-align something relative to it\'s elements dimensions. As of right now, I\'m only aware of vertical-align:middle;<

Answer 1

My favorite for modal centering is to use a combination of position and translate, as described here: http://css-tricks.com/centering-percentage-widthheight-elements/

In summary:

.center {
    width: 50%; /* or whatever you want your width to be; defaults to 100% */
    height: 50%; /* or whatever you want your height to be; defaults to wrapping content */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

This may or may not work according to your use case, but it's a good trick to have in your toolbox.