簡體   English   中英

你如何垂直居中容器並使用 CSS 刪除滾動條(同時使用 min-height 100vh)

[英]how do you center container vertically and remove the scrollbar using CSS (while using min-height 100vh)

我是新來的,仍在學習如何使用 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>

截屏

您可以使用以下代碼行隱藏滾動條

container{
   overflow : hidden;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM