Flexbox居中于纸张css A4页面内

我正在用HTML/CSS编写A4纸，但在居中（）方面遇到了一些问题

当前结果：

预期结果：

@page{
尺寸：A4
}
.首页{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.frontpage>*{
文本对齐：居中；
}
.frontpage页脚{
自对准：柔性端；
}

水平/垂直居中的徽标
页脚水平居中，但垂直推到底部

问题在于您的flex容器设置为

flex direction:row

（默认情况下）

这意味着您的flex项目水平对齐，创建两列。每个项目中的内容都不能侵入同级的列空间，因此不可能在页面上水平居中

更好的方法是使用

flex-direction:column

。这将使项目垂直对齐

然后使用

justify content:space-between

将项目固定到顶部和底部

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

@page{
尺寸：A4
}
.首页{
显示器：flex；
对齐内容：调整；/*之间的间距*/
对齐项目：居中；
弯曲方向：列；/*新*/
}
.frontpage:：在{/*新建之前*/
内容：''；
}
.frontpage>*{
文本对齐：居中；
}

水平/垂直居中的徽标
页脚水平居中，但垂直推到底部