Bootstrap 4 Vertical Align Text Won't Center on Card

Bootstrap 4 vertical align text won't center on card

Here is a solution using bootstrap 4 documentation for flexbox. Read more here

What you need to know,

d-flex -> makes the element a flexbox.

align-items-center - vertically aligns the content.

justify-content-center - horizontally aligns the content.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row text-center h-100">  <div class="col-md-3 text-center my-auto">    <div class="card card-block d-flex" style="height: 120px">      <div class="card-body align-items-center d-flex justify-content-center">        This is some text within a card body.      </div>    </div>  </div></div>

Vertical align text in Bootstrap card

Can you please check the below code? Hope it will work for you. In the Bootstrap 5 document, they have mentioned that to vertically center "non-inline content" (like <div>s and more), use our flex box utilities.
With the help of these utilities, you can easily align the text vertically and horizontally center.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="card bg-light mb-3" style="max-width: 18rem;;">
  <div class="card-header">Total Views</div>
  <div class="card-body d-flex align-items-center justify-content-center" style=" height:150px">
    <h5 class="card-title">Light card title</h5>
  </div>
</div>

Bootstrap 4 card deck, vertical align center

you can vertical align any element using position: absolute;

like ,

HTML

<div class="parent">
    <div class="element">I'm always<br/>In<br>Center</div>
</div>

CSS

.parent {
  height: 100%;
}

.element {
  position:absolute;
  top:50%; 
  left: 0;
  transform: translateY(-50%); 
}

.parent {  height: 100%;}
.element {  position:absolute;  top: 50%;   left: 0;  transform: translateY(-50%); }

<div class="parent">    <div class="element">I'm always<br/>In<br>Center</div></div>

How to vertically align Bootstrap 4 card title text to bottom

How can I code this so that all four card titles are flush bottom.

Case 1: If the title of your content is not dynamic.

If you want to make the card flush to bottom. You need to set its height and use flexbox to flush it to bottom.

See the code below.

.card-title-cont{  height: 50px;  display:flex;  justify-content: flex-start;  align-items: flex-end;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">          <div class="card-group">                <div class="card img-fluid">                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">                <div class="card-img-overlay">                  <div class="card-title-cont">                    <h5 class="card-title">FIRST CARD</h5>                  </div>                  <hr>                  <p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>                </div>                </div>                                <div class="card img-fluid">                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">                <div class="card-img-overlay">                  <div class="card-title-cont">                    <h5 class="card-title">SECOND CARD</h5>                  </div>                  <hr>                  <p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>                </div>                </div>                                <div class="card img-fluid">                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">                <div class="card-img-overlay">                  <div class="card-title-cont">                    <h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>                  </div>                  <hr>                  <p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>                </div>                </div>                                <div class="card img-fluid">                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">                <div class="card-img-overlay">                  <div class="card-title-cont">                    <h5 class="card-title">FOURTH CARD</h5>                  </div>                  <hr>                  <p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>                </div>                </div>              </div>            </div>

Bootstrap vertical alignment of card-header

You would use flexbox (d-flex) align items center. Also, update the button since float right won't work with flexbox. Use auto margins instead..

<div class="container">
    <div class="card">
        <div class="card-header bg-info text-light d-flex align-items-center">
            <span>Example Python3 script</span>
            <button class="ml-auto btn-light btn" onclick="copy_function()">Copy</button>
        </div>
        <div class="card-body" style="background: #F0F0F0">
            <pre><code class="python" id="text_to_copy">import urllib.request, json</code></pre>
        </div>
    </div>
</div>

https://www.codeply.com/go/FZ3CrQpLxY

How to vertically center a container in Bootstrap?

The Flexible box way

Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we'd need to use some hacks/polyfills or different approaches for IE8/9.

In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax).

Note: it's better to use an additional class instead of altering .jumbotron to achieve the vertical alignment. I'd use vertical-center class name for instance.

Example Here (A Mirror on jsbin).

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Important notes (Considered in the demo):

A percentage values of height or min-height properties is relative to the height of the parent element, therefore you should specify the height of the parent explicitly.
Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example.
In some of old web browsers such as Firefox 9 ^{(in which I've tested)}, the flex container - .vertical-center in this case - won't take the available space inside the parent, therefore we need to specify the width property like: width: 100%.
Also in some of web browsers as mentioned above, the flex item - .container in this case - may not appear at the center horizontally. It seems the applied left/right margin of auto doesn't have any effect on the flex item.

Therefore we need to align it by box-pack / justify-content.

For further details and/or vertical alignment of columns, you could refer to the topic below:

vertical-align with Bootstrap 3

The traditional way for legacy web browsers

This is the old answer I wrote at the time I answered this question. This method has been discussed here and it's supposed to work in Internet Explorer 8 and 9 as well. I'll explain it in short:

In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle declaration. Spec from W3C:

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

In cases that the parent - .vertical-center element in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the .container - aligned to the center vertically.

Getting all together

That being said, we could create a full-height element within the .vertical-center by ::before or ::after pseudo elements and also change the default display type of it and the other child, the .container to inline-block.

Then use vertical-align: middle; to align the inline elements vertically.

Here you go:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

WORKING DEMO.

Also, to prevent unexpected issues in extra small screens, you can reset the height of the pseudo-element to auto or 0 or change its display type to none if needed so:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

UPDATED DEMO

And one more thing:

If there are footer/header sections around the container, it's better to position that elements properly (relative, absolute? up to you.) and add a higher z-index value (for assurance) to keep them always on the top of the others.

How to center cards in bootstrap 4?

Add the css for .card

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

here is the pen

UPDATE:
You can use the class .mx-auto available in bootstrap 4 to center cards.

How can I center text (horizontally and vertically) inside a div block?

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

Update for 2020:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

To specify a fixed width for the child, which is called a "flex item":

#content {
  flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

Example: http://jsfiddle.net/2woqsef1/2/

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.

Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

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

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

Bootstrap 4 Vertical Align Text Won't Center on Card