-5

I have the following code snippet:

#content{
    text-align: center;
    vertical-align: middle;
}
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="content">
                    <h1>Sample Text</h1>
                    <h3>Subtext to the intro to the site</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Get Started!</button>
                </div>
            </div>
        </div>
    </div>
</body>

I'm using Bootstrap's grid system. I want to be able to vertically center the contents of the div with id="content" (basically I want the whole content to be horizontally and vertically centered even as the page is resized). This is meant to be a splash page with an image as the background. How can I do that using CSS? vertical-align: middle does not work.

And just for my learning, does text-align: center basically center any element even though the name seems to indicate it is for text?

mo_maat
  • 2,110
  • 12
  • 44
  • 72
  • are you using bootstrap 4? check the [flex implementation of bootstrap](https://getbootstrap.com/docs/4.0/utilities/flex/#align-items) – Marcelo Origoni Dec 18 '17 at 04:20
  • https://stackoverflow.com/a/17521229/4229270 – Sinto Dec 18 '17 at 04:23
  • https://stackoverflow.com/a/13075912/4229270 – Sinto Dec 18 '17 at 04:24
  • I am using bootstrap 3.3.5. I will play with the pointers provided and maybe come up with a solution. However, the answers provided do not factor that I explicitly said I want a solution that does not alter the current setup I have using the bootstrap grid system. – mo_maat Dec 18 '17 at 23:09

1 Answers1

0
.container .row div
{
   display: table; 
   margin: 0 auto;
}

#content
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
sateesh reddy
  • 26
  • 4
  • 3
    Although this may answer the questions, you may wan't to provide some extra details and explain the answer. In it's current state this answer is low-quality. – Rolf ツ Dec 18 '17 at 08:50