Flex box 居中在桌面上有效，但在手机视图中却不太适用
Posted
技术标签:
【中文标题】Flex box 居中在桌面上有效，但在手机视图中却不太适用【英文标题】：Flex box centering works in desktop but not quite in phone view 【发布时间】：2021-12-22 18:49:06 【问题描述】：使用 flexbox，构成页面的两个单独的句子位于中间。但是，当我在手机上查看该网站时，第二句话沿左侧对齐。 How the site looks on a phone
我尝试使用 @media 和 center-align 来定位第二个句子的大小，但没有成功。
<!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>
【问题讨论】：
【参考方案1】：您需要在包装器 CSS 中添加“text-align:center”，以使包装后的文本即使在包装时也居中
.wrapper
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
【讨论】：
以上是关于Flex box 居中在桌面上有效，但在手机视图中却不太适用的主要内容，如果未能解决你的问题，请参考以下文章
当我将屏幕大小调整为移动设备时，我的网站移动视图在桌面上正确显示隐藏元素，但在我的手机上它们没有隐藏
React Native 中的 Flex Box 的用法（水平布局垂直布局水平居中垂直居中居中布局）
CSS3 display：flex和display：box有啥区别
CSS flex-box：尽管 justify-content 和 align-items 设置正确，但文本并不完全居中