html - Css在中心水平和垂直对齐项目
问题描述
我正在尝试将输入字段放在页面的中心,任何帮助。到目前为止,我只能将内容水平居中,垂直居中失败。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
input[type=text] {
margin: 0;
}
form {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<input type="text">
</form>
</div>
</body>
</html>
解决方案
您需要设置容器高度:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
input[type=text] {
margin: 0;
}
form {
border: 1px solid blue;
}
<div class="container">
<form action="">
<input type="text">
</form>
</div>
推荐阅读
- html - 如何在表格中的 td 内使用边距但不使用边框折叠:分离
- r - ggplot 指定经度/纬度轴中断
- r - 使用 quadprog 的多项式回归
- cplex - CPLEX 障碍方法迭代限制
- java - ModelMapper - 如何从源计算值并将其设置为目标
- reactjs - a11y:什么是正确的`
- loopbackjs - 'TypeError:无法初始化未定义的连接器:无法读取未定义的属性'root''
- python - 当图形包含多个子图时,matplotlib.widgets.TextBox 交互很慢
- vue.js - VueJs 使用属性值获取数组值
- java - 无法使用 Spring MVC 在 HTML ArrayList 中打印