我放弃了，来这里寻求帮助。
我正在尝试对齐此 div 的内部，以便它位于正中间:
(红色边框只是为了让我可以看到每个元素的布局...)
body {
margin: 0;
padding: 16px;
}
@font-face {
font-family: "Product Sans";
font-style: normal;
font-weight: normal;
src: url("ProductSans-Regular.woff") format("woff");
}
.form {
background-color: grey;
background-color: rgba(66, 66, 66, 0.7);
border: 1px solid transparent;
border: 1px solid red;
border-radius: 25px;
color: #FFFFFF;
font: 1em "Product Sans";
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.textInput {
background-color: transparent;
border: none;
border: 1px solid red;
border-bottom: 2px solid transparent;
box-sizing: border-box;
padding: 16px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.textInput:focus {
border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}
.textInput:invalid {
box-shadow:0 0 0 transparent;
}
.submit {
background-color: transparent;
border: 2px solid rgba(255, 138, 128, 0.7);
border: 1px solid red;
box-sizing: border-box;
padding: 16px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.submit:hover {
background-color: rgba(255, 138, 128, 0.7);
border: 2px solid transparent;
}<!DOCTYPE html>
<html>
<head>
<title>Beautiful login - made with <3, PHP, CSS and HTML</title>
<meta charset="utf-8" />
<link type="text/css" href="StyleSheet.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="form">
<form action="/index.php" method="post">
<input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required />
<br />
<input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
</form>
</div>
<script>
var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".form").css("width", screenWidth / 3);
$(".form").css("height", screenHeight / 3 + 32);
$(".textInput").css("width", screenWidth / 4)
$(".submit").css("width", screenWidth / 4);
var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
$("body").css("background-image", "url(" + URL + ")");
</script>
</body>
</html>如您所见，我设法将大的灰色圆 Angular 矩形居中，但同样的方法对内容不起作用。
最佳答案
您可以将这三个属性添加到您的.form 类中以实现内容的垂直居中:
display: flex;
flex-direction: column;
justify-content: center;
body {
margin: 0;
padding: 16px;
}
@font-face {
font-family: "Product Sans";
font-style: normal;
font-weight: normal;
src: url("ProductSans-Regular.woff") format("woff");
}
.form {
background-color: grey;
background-color: rgba(66, 66, 66, 0.7);
border: 1px solid transparent;
border: 1px solid red;
border-radius: 25px;
color: #FFFFFF;
font: 1em "Product Sans";
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
justify-content: center;
}
.textInput {
background-color: transparent;
border: none;
border: 1px solid red;
border-bottom: 2px solid transparent;
box-sizing: border-box;
padding: 16px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.textInput:focus {
border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}
.textInput:invalid {
box-shadow: 0 0 0 transparent;
}
.submit {
background-color: transparent;
border: 2px solid rgba(255, 138, 128, 0.7);
border: 1px solid red;
box-sizing: border-box;
padding: 16px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.submit:hover {
background-color: rgba(255, 138, 128, 0.7);
border: 2px solid transparent;
}<!DOCTYPE html>
<html>
<head>
<title>Beautiful login - made with
<3, PHP, CSS and HTML</title>
<meta charset="utf-8" />
<link type="text/css" href="StyleSheet.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="form">
<form action="/index.php" method="post">
<input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required />
<br />
<input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
<br />
<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right">Submit</button>
</form>
</div>
<script>
var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(".form").css("width", screenWidth / 3);
$(".form").css("height", screenHeight / 3 + 32);
$(".textInput").css("width", screenWidth / 4)
$(".submit").css("width", screenWidth / 4);
var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
$("body").css("background-image", "url(" + URL + ")");
</script>
</body>
</html>关于javascript - 在父 div 中居中输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46603301/