Easy way to vertically center anything by CSS3

Vertical align by CSS is the thing that I always struggle to fix. Some times succeed and some times not depends on DOM structure of that component. Time, when we use extensively TABLE for layout structure then it was super easy to align element vertically. But the time of CSS when we start DIV base layout then it has become some challenging staff to do.

Anyway, great technique of CSS3 we can solve it with some features like Flex Box, Grid Layout will make this kind of thing even easier. But there is one other way to solve it and it need only three lines of code. Following are the lines:

.do-vertical-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform:translateY(-50%); /* prefix for IE 9 */
	-webkit-transform:translateY(-50%); /* prefix for Safari and Chrome */
}

FYI: When you use position absolute you can apply relative position on parent DOM so that it will positioning from that parent but it depends on your structure.

I hope it will help you and save some time to fix Vertical alignment without table. Indeed!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s