Home Vertical Center on responsive layout

# Vertical Center on responsive layout

Petter
1#
Petter Published in 2017-10-30 14:57:35Z
 I am using the class .vertical-align-center on a content div inside a bootstrap 3 column. If the height of the column is fixed, so it is bigger than the content height, or if the other column in the same row has bigger content that makes the height bigger than the content, all works fine. But on smaller devices, I have the column width set to 12, so the column has a fluid height that is the same as the content. This makes the content go off -50% from the top instead. Any ideas how to solve this? .vertical-align-center { position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); } 

Some text


Kumar
2#
 You can use flex for this solution. Like body,html { height: 100%; } .Aligner { display: flex; align-items: center; justify-content: center; height: 100%; }