如何实现两个段落跨所有屏幕尺寸垂直居中且互不重叠

你之前的方案出现重叠是因为绝对定位会让两个段落都脱离文档流，全部基于视口位置居中，自然会叠加；vertical-align仅对行内元素、表格单元格生效，直接给块级p标签使用不会生效。

以下是可直接运行的修改后代码，兼容所有主流设备和屏幕尺寸：

<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body  {
  /* 清除body默认边距 */
  margin: 0;
  /* 让body高度撑满整个可视窗口，作为垂直居中的参照基准 */
  min-height: 100vh;
  background-color:#999;
  /* 启用flex布局 */
  display: flex;
  /* 子元素垂直排列 */
  flex-direction: column;
  /* 垂直方向居中对齐 */
  justify-content: center;
  /* 水平方向居中对齐 */
  align-items: center;
  /* 控制两个段落之间的间距，可按需调整数值 */
  gap: 20px;
}
p {
  max-width: 50%;
  font-family: "Times New Roman", Times, serif; 
  font-size: 1.75em;
  font-weight: bold;
  text-align: center;
  margin: 0;
}
</style>
</head>
<body>
<p> Jefferson's Virginia Website </p>
<p> In Process of Being Re-constructed </p>
</body>
</html>

关键修改说明 #

• 给body设置min-height: 100vh，让容器高度始终等于可视窗口高度，提供垂直居中的参照
• 用flex布局控制子元素排列，无需手动计算偏移量，自动适配不同屏幕尺寸
• 合并了重复的p标签样式，删除了冗余的br标签，用gap属性统一控制段落间距，避免不同设备下间距不一致
• 修复了原代码中max-width: 50%后缺失分号的语法错误，避免样式失效

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