Flexbox centering within paper-css A4 page

Question

I'm writing an A4 paper in HTML/CSS with paper-css but I'm having some trouble with the centering (https://css-tricks.com/centering-css-complete-guide/#both-flexbox).

Current result:

Desired result:

https://jsfiddle.net/askhflajsf/x7sjrzy4/

@page {
  size: A4
}

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

.frontpage > * {
  text-align: center;
}

.frontpage footer {
  align-self: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css" rel="stylesheet"/>
<body class="A4">
  <section class="sheet padding-10mm frontpage">
    <h1>Logo centered horizontally/vertically</h1>
    <footer>Footer centered horizontally but pushed to the bottom vertically</footer>
  </section>
</body>

Michael Benjamin · Accepted Answer · 2017-08-18T16:24:57.387

The problem is that your flex container is set to flex-direction: row (by default).

That means that you're flex items are horizontally aligned, creating two columns. The content in each item cannot invade the column space of the sibling, so centering horizontally on the page is not possible.

A better method would be to use flex-direction: column. This aligns your items vertically.

Then use justify-content: space-between to pin items to the top and bottom.

Then, add a single and invisible pseudo-element to serve as a flex item, which forces the heading to the vertical center.

@page {
  size: A4
}

.frontpage {
  display: flex;
  justify-content: space-between; /* ADJUSTED */
  align-items: center;
  flex-direction: column;         /* NEW */
}

.frontpage::before {              /* NEW */
  content: '';
}

.frontpage > * {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css" rel="stylesheet"/>
<body class="A4">
  <section class="sheet padding-10mm frontpage">
    <h1>Logo centered horizontally/vertically</h1>
    <footer>Footer centered horizontally but pushed to the bottom vertically</footer>
  </section>
</body>

revised fiddle demo

More information:

Center and bottom-align flex items

Flexbox centering within paper-css A4 page

1 Answers1