HTML5 Bootstrap Single Page - Vert Centering <section>'s - css

Question

Hello all and thanks for the input.
I've looked at a number of templates but haven't felt that I've found a clean way of presenting vertically centered content of a "section" on single page layouts. I am referring to the entire section space space here, not the elements within.
The desired effect is to limit the viewable content to sections at a time and use a scroll to move to the next section on the single page ... easy enough with easing.js.
So for a psuedo markup there would be something like
<section id="topic1"
<random element>
<random element>
</section>
... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%
<section id="topic2"
<random element>
<random element>
<random element>
<random element>
</section>
... Some space added ...
... e.g. margin-top: 100px
...etc
As the browser moves to each section (by anchors) each one would be shown with " empty space" and it delivers a nice effect. The challenge is to always have the sections vertically centered as we change devices in a 'responsive' type approach. I've also found some inconsistencies with Internet Explorer. Understandably at certain screen sizes (say table landscape height and phones) this becomes impossible and scrolling will be necessary.
Any thoughts on a CSS approach to implement this cleanly would be appreciated.

Answer 1

You can do it by using a wrap and using the css properties display:table and display:table-cell together with vertical-align:middle
HTML markup with your needed wrap:
<section id="topic1">
<div class="wrap">
<div> aaaa</div>
<div> aaaa</div>
</div>
</section>
Needed css:
section{
display:table;
height:220px;
background: #ccc;
width:100%;
}
.wrap{
display:table-cell;
vertical-align:middle;
}
Living demo
Using line-height is a more simple method but you need to know the height of the section.
You can find more ways about how to accomplish it here.

Answer 2

There are a couple different ways to can use the Bootstrap markup to achieve what you are looking for. Here is one example:
.space {
padding-bottom: 200px;
}
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
I would try and concentrate on the offset classes and look at using .center-block and .center-text. Center-block will align your elements center, and center-text will do the same for text. This will keep you from bloating your css and keep everything predictable for responsive design.
Hope this helps.