如何仅用<p>元素实现全屏黑底且文本横竖居中？

当然可以用单个<p>元素完成需求，核心是让<p>铺满整个视口，并通过布局属性实现文本居中。以下是两种可行的实现方案：

方案1：Flex布局实现居中 #

<p onclick='this.innerHTML++' style="
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
">0</p>

样式说明： #

• margin: 0：清除<p>标签默认的上下外边距，避免页面边缘出现白边
• width: 100vw; height: 100vh：强制<p>元素宽度和高度等于视口的宽高，实现全屏覆盖
• background: #000：设置黑色背景，替代无效的box-shadow方案（box-shadow仅作用于元素自身尺寸，默认<p>仅包裹文本，无法铺满全屏）
• color: #fff：将文本设为白色，确保在黑色背景上可见
• display: flex; justify-content: center; align-items: center：通过Flex布局快速实现文本的水平+垂直居中，解决你之前仅能水平居中的问题

方案2：Grid布局实现居中（更简洁） #

Grid布局的居中写法更精简，效果完全一致：

<p onclick='this.innerHTML++' style="
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
">0</p>

为什么你之前的尝试失败： #

• box-shadow方案无效：默认<p>元素的宽高仅由内部文本"0"决定，阴影只会围绕这个小文本块扩展，无法覆盖全屏
• 仅实现水平居中：你之前用background时，可能只设置了text-align: center，但没有处理垂直方向的居中，而Flex/Grid布局可以同时搞定两个方向的居中

内容的提问来源于stack exchange，提问作者horsey_guy