Vertically center Bootstrap 3 button within column

Question

I've spent some time trying to figure out why my button will not center vertically inside of a column I figured I would ask here because I think I'm missing something, the HTML:

<div class="container">
    <div class="row">
        <div class="sellthem">
            <div class="col-sm-8 col-sm-offset-1">
                <div class="sellContent">
                    <h1 class="sellHeader">Bacon ipsum dolor amet fatback turkey filet mignon</h1>
                    <h4 class="sellText">Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip</h4>
                </div>
            </div>
            <div class="col-sm-2 sendThem">
                <button type="button" class="btn btn-lg btn-block">Sign Up</button>
            </div>  
        </div>
    </div>
</div>

The text in the h1 and h4 tags will change so the height could change and I would like to center the button within the column col-sm-2. When I researched the Bootstrap documentation under buttons there isn't anything mentioned regarding vertically centering.

When I searched SO I run across How can I center vertically a bootstrap class button? but it uses a forced height of 200px, answer:

div#container {
    height: 200px; 
    border: solid 2px green; text-align:center;
    line-height:200px;
}
input#verticalButton {
     vertical-align: middle;
}

Further research, How to center buttons in Twitter Bootstrap 3? suggests center-block but that is for horizontal centering and I want vertical centering.

Further down the rabbit hole I ran across button vertical align bootstrap but when I try:

HTML:

<div class="sendThem">
    <div class="col-sm-2">
        <button type="button" class="btn btn-lg btn-block">Sign Up</button>
    </div>
</div>

CSS:

.sendThem {
    display:table;
}
.sendThem .col-sm-2 {
    display:table-cell;
    vertical-align:middle;
    float:none;    
}

my result is the same and that is a button at the top. I thought, per reading somewhere that there could be an issue caused by the column but I can't seem to locate that documentation.

What is the proper way to center the button vertically with HTML and CSS so I can get something like this:

I wasn't planning to use a set height, and anything below col-sm was going to be a full width centered button. Here is a Bootply trying to center the button vertically.

I'll say than using just Bootstrap 3 grid system won't be enough, you will need to introduce some particular styles or even not use the grid at all. Which browsers do you need to support? — Mauro Gava, Oct 11 '16 at 18:51
not worried about legacy browsers but still would need to support current IE. — DᴀʀᴛʜVᴀᴅᴇʀ, Oct 11 '16 at 18:52

Mauro Gava · Accepted Answer · 2016-10-11T23:30:17.190

Well You can use this code:

.sellthem {
    display: flex;
    align-items: center;
}

@media only screen and (max-width : 768px) {
    .sellthem {
        display: block;
    }
}

Take in account that this is more like a hack (you're overwriting its code base) so it isn't the best way to solve this issue since Bootstrap has not support for vertical align in its grid system (not sure but I think that in the new version they will have vertical alignment).

Note: please check this solution in all browser you are supporting.

Two possible solution could be use another grid system based in flexbox or just write the styles for this case scenario for your own.

UPDATE

You can write just the following and it should work the same:

@media only screen and (min-width : 768px) {
    .sellthem {
        display: flex;
        align-items: center;
    }
}

Vertically center Bootstrap 3 button within column

1 Answers1