登录框flex居中后溢出的根本原因是父容器高度失控且子元素尺寸未约束，需分别控制居中与防溢出：父容器设min-height:100vh，子元素限制宽高、换行及溢出行为。
登录框用 flex 居中后内容溢出，本质是父容器高度失控 + 子元素未约束尺寸。不是居中方式错了，而是“居中”和“防溢出”要分开控制。
flex 居中容器必须设 min-height: 100vh
只写 display: flex; justify-content: center; align-items: center 不够——如果内容超长（比如错误提示堆叠、密码强度条展开、多行提示文本），父容器没高度上限或最小保障，align-items: center 就会把整个框往上顶，导致底部被裁切或滚动失效。
- 父容器（如
<body>或包裹<form>的<div class="ph-login">）必须加min-height: 100vh，不能只靠height: 100vh（后者会强制截断） - 避免在父容器上同时用
overflow: hidden——它会掩盖溢出问题，但不解决布局塌陷 - 若登录框本身有固定高（如
height: 680px），需确认其内部所有子元素（.right-form-box、.tabcontent等）都设了max-height或overflow-y: auto，否则撑破父级
<form> 内部元素必须主动限制宽度和换行
居中只是定位，不阻止内部文本、按钮、图片撑开容器。常见溢出源是：<input> 无 max-width、错误提示文字不换行、<button> 文字过长、背景图未配 background-size: cover。
-
<form>自身建议用max-width: 480px而非width: 100%，防止小屏下过宽 - 所有表单项（
<input>、<button>）加width: 100%和box-sizing: border-box，避免 padding/border 累加溢出 - 错误提示文案（如
<span class="error">）必须设white-space: normal和word-break: break-word，禁用white-space: nowrap - 背景图（如
background-image: url(image/puhuologin.png)）务必配background-size: contain或cover，否则拉伸溢出
绝对定位登录框要防 transform 和滚动冲突
如果你用 position: absolute + transform: translate(-50%, -50%) 居中，且登录框内容可滚动（比如带协议条款的弹窗），滚动时位置会偏移——因为 transform 基于初始定位点，不随滚动重算。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，且不能是overflow: hidden的祖先（否则滚动被截断） - 登录框自身加
max-height: 80vh和overflow-y: auto，让内容在框内滚动，而不是推着整个框动 - 避免在
<body>上设overflow: hidden（如你知识库中body { overflow: hidden; }），这会让登录框内滚动失效，用户卡死 - 移动端键盘弹起时，
100vh会变小，此时min-height: 100vh失效，建议补充 JS 动态修正：监听resize，重设style.minHeight = window.innerHeight + 'px'
真正容易被忽略的是：居中解决的是“位置”，而溢出是“尺寸链断裂”。哪怕用了最标准的 flex 居中，只要任何一个祖先节点没设 max-width、任意一个子元素用了 white-space: nowrap 或没配 box-sizing，溢出就一定会发生——它不挑居中方式，只挑尺寸控制是否闭环。
