Flexbox居中原理概述
css flexbox（弹性盒子）是现代网页布局中实现元素对齐和分布的强大工具。要实现一个元素在父容器中同时垂直和水平居中，我们通常会利用以下css属性组合：
- display: flex;：将父容器设置为弹性容器。
- justify-content: center;：在主轴（默认为水平方向）上居中对齐弹性项目。
- align-items: center;：在交叉轴（默认为垂直方向）上居中对齐弹性项目。
以下是一个常见的初始代码示例：
#login-form {
display: flex;
justify-content: center;
align-items: center;
}以及对应的HTML结构：
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>在这种情况下，#login-form内的<form>元素能够水平居中，但通常不会垂直居中。
垂直居中失效的深层原因
当只应用上述Flexbox属性时，元素往往只能实现水平居中，而垂直方向上看起来并没有居中效果。这并非align-items: center失效，而是其作用范围有限。
align-items: center的作用是让弹性项目在弹性容器的交叉轴空间内居中对齐。如果弹性容器（即#login-form）的高度仅仅由其内容决定，那么它的高度将与内部的<form>元素高度相同。在这种情况下，弹性容器并没有额外的垂直空间来让<form>居中。换句话说，#login-form的高度与<form>的高度一致，所以<form>已经“占据”了所有可用垂直空间，自然无法在其中间对齐。
解决方案：确保父容器具有足够的垂直空间
要解决这个问题，关键在于确保弹性容器（#login-form）拥有足够的垂直空间。最常见的做法是让其高度至少占据整个视口（浏览器可见区域）的高度。这可以通过设置min-height: 100vh;来实现。
- min-height：设置元素的最小高度。这意味着元素的高度至少是这个值，但如果内容需要更多空间，它会随之增长。
- 100vh：vh是视口高度单位，100vh表示占据视口高度的100%。这样，#login-form就能够扩展到整个浏览器窗口的高度。
此外，浏览器默认会给body元素添加一些外边距（margin），这可能会导致100vh的元素出现滚动条或不完全覆盖视口。因此，通常建议重置body的默认外边距。
修正后的CSS代码：
body {
margin: 0; /* 移除body的默认外边距 */
}
#login-form {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 确保弹性容器占据整个视口高度 */
}完整的HTML结构（与之前相同，因为修改只在CSS）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/loginStyle.css">
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="../javascript/loginScript.js"></script>
</body>
</html>通过添加min-height: 100vh;，#login-form现在占据了整个视口的高度，为内部的<form>元素提供了足够的垂直空间。此时，align-items: center;就能正确地将<form>在垂直方向上居中。
注意事项
-
height vs min-height:
- 使用min-height: 100vh;比height: 100vh;更安全。如果内容超出了视口高度，min-height允许元素高度自动增长，避免内容溢出。而height: 100vh;会强制高度为视口高度，可能导致内容溢出且不可滚动。
-
父元素高度继承:
- 如果不想让元素占据整个视口，而是占据其直接父元素的高度，你需要确保所有上级父元素（直到html和body）都设置了height: 100%;。例如：
html, body { height: 100%; margin: 0; } .parent-container { height: 100%; /* 继承body的高度 */ display: flex; justify-content: center; align-items: center; }
- 如果不想让元素占据整个视口，而是占据其直接父元素的高度，你需要确保所有上级父元素（直到html和body）都设置了height: 100%;。例如：
-
其他居中方法:
- 除了Flexbox，CSS Grid布局也提供了强大的居中能力，例如使用place-items: center;。
- 对于特定场景，也可以使用绝对定位结合transform属性实现居中。
- 选择哪种方法取决于具体布局需求和兼容性考量。对于现代浏览器，Flexbox和Grid是首选。
总结
实现Flexbox元素的垂直水平居中，关键在于理解align-items等对齐属性是基于弹性容器的可用空间进行操作的。当垂直居中不生效时，最常见的原因是弹性容器本身的高度不足。通过为弹性容器设置一个明确且足够大的高度（如min-height: 100vh），并重置body的默认外边距，即可确保元素在视觉上达到完美的垂直水平居中效果。
