Vertical align responsive container in Bootstrap

Question

I'm trying to vertical align a container div within a jumbotron.

Because the height of the container (and so the jumbotron also) is variable top: 50%; margin-top: -'height * 0.5' won't work.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
 .banner {
  padding: 48px 0px 48px 0px;
  text-align: center;
}
.banner:after {
  content: "";
  display: block;
  padding-top: 12.5%;
}

  .container {
  background: red !important; /* For testing vertical alignment */
  }

<header class="jumbotron banner">
  <div class="container">
    <h1>Title</h1>

    <p>Subtitle</p>
    <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>

    </p>
  </div>
</header>

https://jsbin.com/honawo/quiet ... 5 ways to do it, pick one — Justus Romijn, Feb 18 '15 at 15:09
possible duplicate of [Vertically Align text in a Div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — Justus Romijn, Feb 18 '15 at 15:11

maioman · Accepted Answer · 2015-02-18T14:42:52.710

2

you should just center it using padding, this is the default way of doing it;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
 .banner {
  padding: 5% 0px;
  text-align: center;
}
.banner:after {
  content: "";
  display: block;
  
}

  .container {
  background: red !important; /* For testing vertical alignment */
  }

<header class="jumbotron banner">
  <div class="container">
    <h1>Title</h1>

    <p>Subtitle</p>
    <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>

    </p>
  </div>
</header>

edited Feb 18 '15 at 14:42

answered Feb 18 '15 at 14:19

maioman

18,154
4
36
42

This won't work. As I said the height of the banner should be variable. – Berendschot Feb 18 '15 at 14:28
1

in this way #banner will always adjust to .container adding padding top & bottom , from your question that's what I understand.. – maioman Feb 18 '15 at 14:34
By changing the padding to percent the height becomes variable. – Berendschot Feb 18 '15 at 14:40
If you edit your post I can up vote it. `padding: 5% 0px 5% 0px;` – Berendschot Feb 18 '15 at 14:41

score 1 · Answer 2 · answered Feb 18 '15 at 14:13

1

To align div vertically center you can use css like

position: relative;
top: 50%;
transform: translatey(-50%);

ex

.outer{
    height:100px;
    background:gray;
}
.inner{
    background:green;
    position:relative;
    top:50%;
    transform:translatey(-50%);
}

<div class="outer">
    <div class="inner" >
                  <p>sample text</p>
        </div>
</div>

answered Feb 18 '15 at 14:13

Swapnil Motewar

1,080
6
12

What position do i give to the parent? – Berendschot Feb 18 '15 at 14:29

score -1 · Answer 3 · answered Feb 18 '15 at 14:17

-1

There are several ways you can get content aligned vertically. I am posting here one common and most recent trick.

Give position: relative; to the parent element.
To the child:

.child-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

See JSFIDDLE and comment below if you need further assistance.

answered Feb 18 '15 at 14:17

Anwar Hussain

450
2
12

Your example is making things even worse. – Berendschot Feb 18 '15 at 14:25
Did you see JSFIDDLE which is working perfectly. Or maybe I was unable to understand what the question is? – Anwar Hussain Feb 18 '15 at 14:33
Oh mey be you forgot to add `-webkit-, -moz-, -ms-, -o-` to the `transform` property to get cross browser compatibility! Please see my fiddle again [here](http://jsfiddle.net/getanwar/bmb1nkdg/1/) . – Anwar Hussain Feb 18 '15 at 14:49

Vertical align responsive container in Bootstrap

3 Answers3