I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); which resulted in overlapping. It makes sense, but I can't seem to find a solution around it.
<!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>