Home Vertical Center on responsive layout
Reply: 1

Vertical Center on responsive layout

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%);
<div class="column col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <div class="column-content vertical-align-center">
    <p>Some text</p>

Kumar Reply to 2017-10-30 15:02:07Z

You can use flex for this solution. Like

body,html {
  height: 100%;

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
<div class="Aligner">
  <div class="Aligner-item">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, qui.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed itaque voluptatum fuga aspernatur consectetur ipsum porro corporis autem commodi totam beatae atque doloremque possimus hic sunt, dolores ullam quod ducimus.</p>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.336851 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO