水平居中没有问题，但垂直居中有问题。无论使用什么尺寸的设备，我都希望这两句话在页面中间。我尝试垂直对齐，但没有成功。我试过的位置：绝对；最高：50%；左：50%；transform:平移(-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>
1(包装wrapperHTML元素中的所有元素
<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>