Flex 框居中在桌面上有效，但在 phone 视图中不完全有效

Question

使用flexbox，组成页面的两个独立的句子在中间。但是，当我在 phone 上查看该网站时，第二个句子沿左侧对齐。 How the site looks on a phone

我试过使用@media 和居中对齐来定位尺寸，特别是第二句没有成功。

<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
    height: 100%;}
body {
  background-color: #999;}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: 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;}
</style>
</head>
<body>
<div class="wrapper">
  <p class="one"> Jefferson's Virginia Website </p>
  <br>
  <p class="two"> In Process of Being Re-constructed </p>
</div>
</body>
</html>

Answer 1

您需要将“text-align:center”添加到包装器 CSS 以保持包装文本居中，即使在包装时也是如此

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

Flex 框居中在桌面上有效，但在 phone 视图中不完全有效

Flex box centering works in desktop but not quite in phone view

html

css

flexbox

media-queries

text-align