search

philipwalton / solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
https://philipwalton.github.io/solved-by-flexbox/
MIT License
13.01k stars 1.01k forks source link

Vertical Centering doesn't work #118

Closed gubikmic closed 5 years ago

gubikmic commented 5 years ago

If I copy and paste the HTML and CSS from the vertical-centering demo it doesn't work. http://jsfiddle.net/exdL0s9j/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div class="Aligner">
      <div class="Aligner-item Aligner-item--top">foo</div>
      <div class="Aligner-item">bar</div>
      <div class="Aligner-item Aligner-item--bottom">baz</div>
    </div>
  </body>
</html>

main.css:

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

I might miss something or maybe the example isn't self-contained as it is.

gubikmic commented 5 years ago

OK, so the Aligner container needs to have a given width and height. To align on the whole page I found this to work: http://jsfiddle.net/5x60yjgL/

So not just a width and height of 100% of the container itself, but additionally:

html, body {
  height: 100%;
  margin: 0;
}