I'm using a bootstrap row and I'm trying to center some text, but the text is centered horizontally but not vertically.

How it looks now:

It should look something like this:

The second image has the "contact me centered vertically and horizontally in the div.

Code

Here is my HTML code:

<div >
                    <h1 >PLACEHOLDER</h1>
                    <p >PLACEHOLDLER</p>

                    <div >
                        <div ><a href="linkedin.com"><img 
                                    src="assets/linkedin.png"></a>
                        </div>
                        <div ><a href="instagram.com"><img 
                                    src="assets/instagram.png"></a>
                        </div>
                        <div >
                            <p id="landing-contact-me-text">contact me<p>
                        </div>
                    </div>
                </div>

As you can see, I tried using the Center class for the parent div, but to no avail.

Heres the CSS for relevant classes:

.landing-header {
    font-family: 'DM Serif Display';
    font-size: 4rem;
}

.landing-text {

    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    margin-right: 25%;
    text-align: justify;

}
.landing-contact-me {
    margin-top: 30%;
    margin-right: 25%;
    padding: 3% 2% 3% 2%;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
    align-items: center;
    text-align: center;
    
}
.landing-socials{
 max-width: 100%;
 height: auto;
}

#landing-contact-me-text{
    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    text-align: center;
}


.center{
    text-align: center;
    vertical-align: middle;
}

CodePudding user response：

Add class align-items-center with row class it will set the columns of this row to vertical center.

<div >

CodePudding user response：

In the .landing-contact-me div you can remove align-items, and text-align.

Then you can use display: flex and justify-content: center so that the elements in this div will be vertically and horizontally aligned.

Your css should look like this after:

.landing-contact-me {
  margin-top: 30%;
  margin-right: 25%;
  padding: 3% 2% 3% 2%;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}