FerchoCarcho FerchoCarcho - 2 months ago 15
HTML Question

Min-height:100% along with flexbox’s align-items: center; dont make items vertically center

Before content is displayed I have a spinner that shows during 2 seconds before changing to the content itself.

Having the following Html

<div class=”container”>

<div v-show ="!loading">
//here content will be displayed after 2 seconds.

<div class="center" v-show="loading">
<img src="/default.svg" class="loading spinner-wrapper">


html {
height: 100%;

body {
height: 100%;
margin: 0;

//height:100%; Align items vertically center Correctly
min-height: calc(100vh - #{$footerHeight} ); //it doesnt



display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;

The issue is if I set the min-height:100% of the container instead of setting height:100% the spinner no longer aligns vertically to the center.

Why Im changing to min-height:100%? because The footer which is below the container is overlapping content when viewport expands or shrinks.

I have searched and I found an issue with Explorer .
But Im using mozilla firefox 49.0
Is there a workaround about this?

My markup works fine. the problem is the flexbox align Items.
look this article. It is the same.
On chrome Version 52.0.2743.116 (64-bit) the issue is also present. BUT if it is me who is making something wrong WHY height:100% makes items align center correctly?


The flexing occurs on the items, so making your image a flex item and telling it to center on a non-flex container won't get the result you're looking for. Here is a jsbin converting the container to a flex and then aligning the item as expected: jsbin.com/lewefiyaxi/edit?html,css,output - I'd probably opt for a different solution to how your placing your loader by not making it an item as when your content is injected you'll force a layout invalidation on the flex which is undesirable. You'll want to possibly just do a paint change if possible.