Question

我用paper-css用HTML / CSS写A4纸，但我在中心时遇到了一些问题（https://css-tricks.com/centering-css-complete-guide/#both-flexbox）。

目前的结果：

期望的结果：

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

＆＃13;

@page {
  size: A4
}

.frontpage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.frontpage > * {
  text-align: center;
}

.frontpage footer {
  align-self: flex-end;
}

＆＃13;

<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>

＆＃13;

Answer 1

问题是您的Flex容器设置为flex-direction: row（默认情况下）。

这意味着你的flex项目是水平对齐的，创建了两列。每个项目中的内容都不能侵入兄弟的列空间，因此无法在页面上水平居中。

更好的方法是使用flex-direction: column。这会垂直对齐您的项目。

然后使用justify-content: space-between将项目固定在顶部和底部。

然后，添加一个单一且不可见的伪元素作为弹性项目，强制标题到垂直中心。

@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

更多信息：

Center and bottom-align flex items

Flexbox以纸张A4页面为中心

1 个答案: