0

I have this problem of centering the div vertically. I've looked over Stackoverflow but nothing seems to fix my problem. Here's the code:

.contactform {
  width: 100%;
  min-height: 100vh;
}

.contact {
  width: 100%;
  height: 500px;
  text-align: center;
  background-color: rgb(36, 125, 241);
  margin-top: 100px;
  margin-bottom: 100px;
}

.contact h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.contact-content {
  width: 70%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  margin: 0 auto;
  /* position: absolute; */
  margin-top: 50px;
}

.contact-column-one {
  width: 33%;
  height: 50%;
}

.contact-column-one .location i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-one .location i:hover{
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-one h1 {
  font-size: 30px;
}

.contact-column-two {
  width: 33%;
  height: 50%;
}

.contact-column-two .phone i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-two .phone i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-two h1 {
  font-size: 30px;
}

.contact-column-three {
  width: 33%;
  height: 50%;
}

.contact-column-three .email i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-three .email i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-three h1 {
  font-size: 30px;
}
<section class="contactform" id="contactform">
    <div class="contact">
        <h1>CONTACT US</h1>
        <div class="contact-content">
            <div class="contact-column-one">
                <span class="location">
                    <i class="material-icons">
                        place
                    </i>
                </span>
                <h1>ADDRESS</h1>
                <p>Address</p>
            </div>
            <div class="contact-column-two">
                <span class="phone">
                    <i class="material-icons">
                        phone
                    </i>
                </span>
                <h1>PHONE</h1>
                <p>Phone Number</p>
            </div>
            <div class="contact-column-three">
                <span class="email">
                    <i class="material-icons">
                        email
                    </i>
                </span>
                <h1>EMAIL</h1>
                <p>Email</p>
            </div>
        </div>
    </div>
</section>

I've tried flexbox but came to no solution. I've also tried the method of making top: 50% and then transform: translateY(-50%); but still didn't fix my problem. Thank you for your time!

UPDATE: When I try to make the position absolute/relative to parent/child it moves my section to hero section!

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Jay Dee
  • 127
  • 1
  • 2
  • 10
  • which on of the div**s**? – Temani Afif Feb 02 '21 at 09:07
  • 1
    If this is the `div.contact-content` you just need to add: `align-items: center;` But pay attention because this div is going out from container as you give it the same `height` but without thinking of the title `h1` height. – MaxiGui Feb 02 '21 at 09:12
  • 1
    @MaxiGui Thank you man! You just helped me figure out what to do with height of divs. Much appreciate. – Jay Dee Feb 02 '21 at 09:30
  • @TemaniAfif Thank you for listing some solutions! Have a good day. – Jay Dee Feb 02 '21 at 09:31

0 Answers0