Centering elements in CSS can be a bit tricky. In fact, CSS is kind of notorious for making centering difficult, especially vertical centering.
One of the best and most comprehensive references for all of the techniques for centering, along with the pros and cons of each is the CSS-Tricks article Centering in CSS: A Complete Guide. In the examples below, I'm highlighting just a few techniques that should work within the confines of using Skrollr for your animated story.
In your animated story, you might find that you'd like to center some things. One important point to remember when using Skrollr is that the position property of any element that is animated (has data-* attributes set) will given a class of skrollable. The skrollable class has the following CSS:
/* Styles to make skrollable work. Copy these to your file. */
.skrollable {
position:fixed;
z-index:100;
}
.skrollr-mobile .skrollable {
position:absolute;
}
.skrollable .skrollable {
position:absolute;
}
.skrollable .skrollable .skrollable {
position:static;
}
/* End skrollable styles */
The use of the position property will affect how other CSS layout properties work.
For the next few examples, imagine we were working with a color changing box, using Skrollr.
To horizontally center a block element, such as a div or graphic, use the left or right properties in combination with the transform property.
.box {
left: 50%;
transform: translate(-50%);
}The left property shifts the element's left edge to the middle of the page. The transform property is then used with the translate function. The translate function shifts an element around where it would have appeared. The value of -50% pushes 50% of the element to the left, which centers is on the page.
To vertically center a block element, such as a div or graphic, use the top or bottom properties in combination with the transform property.
.box {
top: 50%;
transform: translateY(-50%);
}This is basically the same as the previous example. In this case we specify the top property for positioning and also use the translateY function since we only want to move the box along the Y-axis.
To both horizontally and vertically center a block element, such as a div or graphic, use both techniques from the previous two examples.
.box {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}This is basically the same as the previous example. In this case we specify the top property for positioning and also use the translateY function since we only want to move the box along the Y-axis.
It's possible that you may also want to use the transform property in conjunction with Skrollr on the element you're trying to center. This would happen if you were changing sizes, rotating or skewing the element.
Since the transform property can have several different types of functions, Skrollr will overwrite your translate function unless you include it in the data attributes.
In this example, we've added a nifty rotating animation. Unfortunately, this overwrites our translate function (open the Developer Tools on the example page to verify this).
The way to fix this is to include our translate functions along with the rotate function in the data attributes.
<div class="box box1"
data-0=" background: hsl(0, 50%, 50%); transform: translate(-50%, -50%) rotate(0deg) ; "
data-1000="background: hsl(360, 50%, 50%); transform: translate(-50%, -50%) rotate(360deg); "
>Make sure to put the translate function first or you'll end up with an uneven rotation.
In your animated story, you might find that you'd like to vertically center text or another element inside of a box. The easiest way to accomplish this is to set the containing box to use the flexbox layout module. Once this is done, centering can be accomplished with justify-content and align-items.
In our example, we have a paragraph of text inside our box. If we want to center the text, we'll apply the CSS to the container, the box.
.box {
display: flex;
justify-content: center; /* horizontal, when using flex-direction: row; */
align-items: center; /* vertical, when using flex-direction: row; */
}This will center the entire block of text within the box. However, if your text is more than one line, it will still be left-justified. To center all the text, add the text-align property to your text.
p {
text-align: center;
}