两个单独的句子垂直放置在页面中心，跨屏幕尺寸，不重叠

Question

水平居中没问题，但垂直居中有问题。无论使用何种尺寸的设备，我都希望这两个句子位于页面中间。我试过垂直对齐但没有成功。我试过 position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);并以它们重叠结束，这是有道理的，但我不知道如何解决它。

<!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  {
  background-color:#999;
}
P.one {
    margin-left: auto;
    margin-right: auto;
    max-width: 50%
    font-family: "Times New Roman", Times, serif; 
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    }
P.two {
    margin-left: auto;
    margin-right:auto;
    max-width: 50%
    font-family: "Times New Roman", Times, serif; 
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    }
    </style>
    </head>
<body>
<p class="one"> Jefferson's Virginia Website </p>
<br>
<p class="two"> In Process of Being Re-constructed </p>
</body>
</html>

Answer 1

1) 将所有元素包裹在 wrapper HTML 元素中

<div class="wrapper"> ... </div>

2) 将 body 和 html 的高度设为 100%

html, body{
    height: 100%;
}

3) 使用 flexbox.

将整个 wrapper 元素居中

.wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

html,
body {
  height: 100%;
}

body {
  background-color: #999;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-align: center;
}

p.one {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75em;
  font-weight: bold;
}

p.two {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75em;
  font-weight: bold;
}

<div class="wrapper">
  <p class="one"> Jefferson's Virginia Website </p>
  <br>
  <p class="two"> In Process of Being Re-constructed </p>
</div>

两个单独的句子垂直放置在页面中心，跨屏幕尺寸，不重叠

Two separate sentences to be placed in center of page vertically, across screen sizes, without over lapping

html

css

css-position

vertical-alignment