How to put all the contents of the container in the center of the screen?

Question

I am trying to display the section "resume-section" in the center of the screen vertically but it doesn't work as I expect it to.

I tried to use "my-auto" in another div tag and also tried to customize css to include auto margin top and bottom.

<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- */*, BOKARO STEEL CITY,  827004. **********.<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>

Using `.my-auto` will not work because its parent, `.container-fluid`, is not `display: flex;`. Try adding this. Also, the parent must be the full height of the screen. — Dave, Jan 22 '19 at 20:54

score 0 · Accepted Answer · answered Jan 22 '19 at 21:39

You can add the d-flex to the container element to change it's display to flex layout. Then set it's height to 100vh and width to 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>

How to put all the contents of the container in the center of the screen?

1 Answers1