Bootstrap: How to center vertically an element

Question

I'm doing a website that will be mostly displayed on a mobile. I'm using bootstrap 4.

Currently I'm trying to display an element that has to be "vertically" centered in the available space.

By this I mean: I've a title, which use a fixed size, and I've one message + 2 button in a div that I need to display in the vertical middle of the available space(without overflow).

I found this: vertical-align with Bootstrap 3 --> the bootstrap 4 snippet doesn't work One other answer which was about flexible box was promising, but it seems that if I have only one component that should use all the remaining space it doesn't work.

Also, one thing; the element that I need to have vertically aligned is displayed through a jquery call:

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

Any idea how I can align the content of #wait-for-result-container vertically in the middle?

Kasia · Answer 1 · 2017-01-24T19:16:29.677

2

You can vertically center content with flexbox

#wait-for-result-container {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

codePen

To fadeIn with display: flex

$("#wait-for-result-container")
    .css("display", "flex")
    .hide()
    .fadeIn();

edited Jan 24 '17 at 19:16

answered Jan 23 '17 at 19:06

Kasia

1,665
1
10
16

Can you edit your code to have initialy the Block hidden and then show it with javascript ? – J4N Jan 24 '17 at 04:54
Your code seems nice, but I cannot specify the height(since the height will depends of the screen) – J4N Jan 24 '17 at 18:43
`100vh` means 100% of screen height, you can skip it, or set it in JS. This code will work with height set by you. – Kasia Jan 24 '17 at 19:13

score 2 · Accepted Answer · answered Jan 23 '17 at 21:00

2

This method works really well for Bootstrap 3.x:

#wait-for-result-container {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  -webkit-transform:translateY(-50%) !important;
  -ms-transform:translateY(-50%) !important;
  transform:translateY(-50%) !important;
}

top:50% sets the position of the div 1/2 way down the container, then transform:translateY(-50%) shifts it back up half the distance, making a nicely vertically centered object relative to the parent container.

answered Jan 23 '17 at 21:00

Arinthros

168
10

Can you maybe edit my snippet with your code? Because if I test it with it, it doesn't work, I don't know if it's because it is displayed after loaded? – J4N Jan 24 '17 at 05:20
In fact I've some issues with it: 1) Some element(the footer) that are placed after it are now appearing before 2) the div on which I now apply this is becoming smaller than the size it needs to display everything(and it's even worse if I left the "left/right" lines(I don't see everything then, the beginning of my line is cut. – J4N Jan 24 '17 at 18:42
In fact, as soon I put the `position:absolute`, the elements that are below are coming above, and the element is not taking the whole width. – J4N Jan 24 '17 at 18:47
Well, I managed the width issue, now I still have the issue with the element that comes after in the HTML is displayed above it. – J4N Jan 24 '17 at 18:50
I find it helpful to set vertically centered elements inside a wrapping div. The wrapping div should be set to `position:relative;`. You'll need to give the parent element a height property so the vertically-centered element has space to use. – Arinthros Jan 24 '17 at 21:05

score 1 · Answer 3 · answered Jan 23 '17 at 19:45

You could just position it absolutely:

#wait-for-result-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

#wait-for-result-container {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

Bootstrap: How to center vertically an element

3 Answers3