Vertical align with bootstrap not working - html

Question

Maybe I don't have it setup right? I've been looking at code for the past 3 hours so it's possible I'm over looking something. Either way I have this h3 in a div and I want it to be centered both horizontally and vertically, however only horizontal is working.
<div class="col-md-4">
<div class="align-items-center" style="background-image:url({{ uni.u_homepage_pic.url }}); background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">{{ uni.u_name }</h3>
</div>
</div>
Update: Using Bootstrap V4

Answer 1

.align-items-center {
display: flex;
align-items: center; /*Aligns vertically center */
justify-content: center; /*Aligns horizontally center */
}
<div class="col-md-4">
<div class="align-items-center" style="background:red; width: 350px; height: 225px;">
<h3 class="text-center" style="">Hello</h3>
</div>
</div>

Answer 2

This answer is for bootstrap 4:
To vertically align the column content, you can use my-auto class in column itself:
<div class="col-md-4 my-auto">
<div style="background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">
{{ uni.u_name }
</h3>
</div>
</div>
Further, to align the items inside a column horizontally, you can use mx-auto and for both horizontal and vertical alignment, use m-auto. Horizontal align will work for single column.
To align all the columns, you need to supply the align-items-* classes inside the row element but not inside the col element:
<div class="container">
<div class="row align-items-start"><!-- align contents to top -->
<div class="col">
Top A
</div>
<div class="col">
Top B
</div>
<div class="col">
Top C
</div>
</div>
<div class="row align-items-center"><!-- align contents to center -->
<div class="col">
Mid A
</div>
<div class="col">
Mid B
</div>
<div class="col">
Mid C
</div>
</div>
<div class="row align-items-end"><!-- align contents to end -->
<div class="col">
Bottom A
</div>
<div class="col">
Bottom B
</div>
<div class="col">
Bottom C
</div>
</div>
</div>
Hope this helps!

Answer 3

try with flex and align-self-center:
<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6">
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>

Answer 4

check this css
<div class="col-md-4">
<h3 class="centered">{{ uni.u_name }</h3>
</div>
and this is the css (put it in the head tag)
<style>
.centered {
display: flex;
flex-direction: row !important;
align-content: center !important;
justify-content: center !important;
align-self: center !important;
align-items: center !important;
margin:auto;
background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat;
width: 350px;
height: 225px;
color:#ffffff;
}
<style>

Answer 5

you can do this like in my example: https://jsfiddle.net/h5xofjqf/
or you just need set a fixed height to your container, then, the h1 would have a
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Answer 6

Property is a margin:auto; ...Do this