Tag Archives: css3 properties

Easy way to vertically center anything by CSS3

Posted on by

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!