Ale*_*x D 1 html css forms center
我已经寻找了大约半天的解决方案。我刚刚开始网页设计，我需要将表单水平和垂直居中。现在它位于左上角。请不要介意糟糕的代码，我很快就会整理它。
form {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.trans {
background:rgba(1,1,1,0.6);
}
body {
background-image: url(wallpaper.jpg);
}
.text {
}
.box {
display: table;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
<title>Peq Anon</title>
</head>
<body>
<div class="container">
<form>
<input class="trans text" type="text" name="Password">
<button type="submit" onclick="#">Submit</button>
</form>
</div>
</body>
</html>这是一个简单的解决方案：将表单包装在容器 div 中并使用display: flex属性来设置对齐方式。
尝试这个：
<div class="container">
<!-- the rest of your code comes here -->
</div>
而对于 CSS
.container {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
您必须确保body,html和container元素的高度都设置为 100%。
以这个小提琴为例：Fiddle