Bootstrap 4 class "my-auto" doesn't center vertically

Question

how can I center text vertically? Tried my-auto class but it's not working it still placed at top.. Can someone help me find where is the problem?

Some code:

  <div class="col-12 col-lg-6 mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="block mb-5">MACHINE TO MACHINE</div>
                </div>
                <div class="col-12">
                    <div class="block mb-5">DATA LAKE</div>
                </div>
                <div class="col-6">
                    <div class="block mb-3">ONLINE DATA API</div>
                    <div class="row">
                        <div class="col-12">
                            <div class="link mb-2">ŠVIETIMAS</div>
                        </div>
                        <div class="col-12">
                            <div class="link mb-2">TRANSPORTAS</div>
                        </div>
                    </div>
                </div>             
            </div>
        </div>

Full code: https://jsfiddle.net/xqdbf5n4/1/

score 1 · Accepted Answer · answered Mar 14 '19 at 12:03

1

Add flex to block

.block {
    border: 1px solid blueviolet;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

answered Mar 14 '19 at 12:03

Anuresh VP

607
6
19

score 0 · Answer 2 · answered Mar 14 '19 at 12:23

I add a level like this (example):

.block {
    border: 1px solid blueviolet;
    height: 150px;
    display: table;
}

.int-box {
display: table-cell;
vertical-align: middle;
}

           <div class="block mb-5">    <div class="int-box">
        <h2>MACHINE TO MACHINE</h2>
    </div></div>

score 0 · Answer 3 · answered Aug 14 '20 at 15:20

Please check this out: https://jsfiddle.net/Sayed_Pritom/y7ugtofp/1/

I have tried the line-height CSS property with the same value as the height of the .block & put all the text inside paragraph tags. Then gave it the following CSS stylings.

.block {
    border: 1px solid blueviolet;
    height: 150px;
    line-height: 150px;
}

.child { 
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;

    }

<div class="block mb-5">
  <p class="child">DATA LAKE</p>
</div>

Bootstrap 4 class "my-auto" doesn't center vertically

3 Answers3