Question

我正在尝试在屏幕中央垂直显示“恢复部分”部分，但是它无法正常工作。

我尝试在另一个div标签中使用“ my-auto”，并且还尝试自定义css以包括顶部和底部的自动边距。

<div class="container-fluid">
    <section class= "resume-section d-flex d-column my-auto" id="about">

        <h1> ANUPAM <span style="color:#E55707">ANAND </span></h1>
        <div class="subheading mb-5"><h4>3096, Sector- 4/A, BOKARO STEEL CITY, JHARKHAND 827004. 8804931901.<span style="color:#E55707"> anupamanand858@gmail.com. </span> <h4> </div>

        <p class="lead mb-5"> I've experience in programming in several programming languages. I also have been working on Machine learning for some time now.
            I've also experience in developing some android apps.This website is my first project using BootStrap for frontend and Django for backend. </p>

        <div class="social-icons ">

            <a href="#"> <i class="fab fa-linkedin"></i> </a>
            <a href="#"> <i class="fab fa-github-square"></i> </a>
            <a href="https://instagram.com/_anupamanand_"> <i class="fab fa-instagram"></i> </a>

        </div>

    </section> 
</div>

Answer 1

您可以将d-flex添加到容器元素，以将其显示更改为flex布局。然后将其高度设置为100vh，宽度设置为100vw。

html, body{
  height: 100%;
}

.full-page{
  height: 100vh;
  width: 100vw;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container-fluid d-flex full-page">
    <section class= "resume-section my-auto" id="about">

        <h1> ANUPAM <span style="color:#E55707">ANAND </span></h1>
        <div class="subheading mb-5"><h4>3096, Sector- 4/A, BOKARO STEEL CITY, JHARKHAND 827004. 8804931901.<span style="color:#E55707"> anupamanand858@gmail.com. </span> <h4> </div>

        <p class="lead mb-5"> I've experience in programming in several programming languages. I also have been working on Machine learning for some time now.
            I've also experience in developing some android apps.This website is my first project using BootStrap for frontend and Django for backend. </p>

        <div class="social-icons ">

            <a href="#"> <i class="fab fa-linkedin"></i> </a>
            <a href="#"> <i class="fab fa-github-square"></i> </a>
            <a href="https://instagram.com/_anupamanand_"> <i class="fab fa-instagram"></i> </a>

        </div>

    </section> 
</div>

如何将容器的所有内容放在屏幕中央？

1 个答案: