Question

我遇到了垂直居中 div 的问题。我查看了 Stackoverflow，但似乎没有解决我的问题。代码如下：

.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>

我尝试过 flexbox，但没有解决方案。我也尝试过制作 top: 50% 然后 transform: translateY(-50%); 的方法，但仍然没有解决我的问题。感谢您的时间！

更新：当我尝试将位置绝对/相对设置为父/子时，它会将我的部分移动到英雄部分！

在父 div 内垂直居中一个 div

0 个答案: