你如何垂直居中容器并使用 CSS 删除滚动条（同时使用 min-height 100vh）

Question

我是新来的，仍在学习如何使用 HTML 和 CSS 开发网站。

我希望我的容器垂直和水平地集中（我设法用margin: auto做到了这一点）但是我在垂直方向上失败了。

我将 body 设置为min-height: 100vh （为了使我的背景图像全尺寸和拉伸。

但是，出现了一个滚动条，我想修复它。

这是一个可复制的版本：

 <body> <style> body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; box-sizing: border-box; background: url(images/bg-mobile.svg) $Violet; background-repeat: no-repeat; overflow: hidden; } .container { width: 80%; margin: 30px auto; } </style> <div class="container"> <div class="logo"> <img src="images/logo.svg" alt="logo"> </div> <section class="middle"> <div class="hero"> <img src="images/illustration-mockups.svg" alt="illustration-mockups"> </div> <main> <h1> Build The Community Your Fans Will Love </h1> <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion.</p> <button class="register">Register</button> </main> </section> <div class="social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-twitter-square"></i> <i class="fab fa-instagram-square"></i> </div> <footer> <p class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> Coded by <a href="https://github.com/knychandra">knychandra</a> </p> </footer> <script src="https://kit.fontawesome.com/f9f20a0736.js" crossorigin="anonymous"></script> </body> </html>

截屏

Answer 1

您可以使用以下代码行隐藏滚动条

container{
   overflow : hidden;
}

你如何垂直居中容器并使用 CSS 删除滚动条（同时使用 min-height 100vh）

问题描述

1 个解决方案

解决方案1
0 2020-10-12 04:47:20

你如何垂直居中容器并使用 CSS 删除滚动条（同时使用 min-height 100vh）

问题描述

1 个解决方案

解决方案1 0 2020-10-12 04:47:20

解决方案1
0 2020-10-12 04:47:20