HTML & CSS Bootstrap vertical align/ middle

[meetdilip]

How can I make a couple of pieces of text appear at the middle ( both horizontal and vertical centred) in full viewport view set using

[CODE lang="html" title="viewport full"]<div class="min-vw-100 min-vh-100"></div>[/CODE]

I am using Bootstrap 4.6. Thanks.

 

[Tealk]

I do not understand what you want to achieve with the div?

 

[meetdilip]

Thanks for the reply. I am trying to have a full viewport display with 2 lines of text right in the middle of the screen. If possible a button too.

A simple landing page HTML template using Bootstrap.

 

[meetdilip]

This worked

 <div class="min-vw-100 min-vh-100 gradient text-center justify-content-center align-self-center vertcentre">

.vertcentre {

   display:flex;

  align-items:center;

 

[Tealk]

i would do it this way, at least the pure bootstrap options don't work for me

<div class="center">
  <div>Text</div>
</div>

.center {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

https://codepen.io/tealk/pen/abBbVMN