提问人：Anonymous 提问时间：8/4/2022 最后编辑：Naren MuraliAnonymous 更新时间：8/4/2022 访问量：113
输入框未居中 [复制]
input box not centering [duplicate]
问：
出于某种原因，我的网站没有将输入框居中。法典：
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
body { background-color: black; }
#textInput {
position: absolute;
top: 50%;
right: 50%;
width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digturd.io</title>
</head>
<body>
<input id="textInput" type="text">
</body>
</html>由于某种原因，我创建的文本框未居中。有什么原因吗？
代码笔：https://codepen.io/ARandomUncreativeName123/pen/oNqqeoY
答：
1赞
Amandeep Singh
8/4/2022
#1
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
body { background-color: black; }
#textInput {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
transform: translate(-50%,-50%)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digturd.io</title>
</head>
<body>
<input id="textInput" type="text">
</body>
</html>只需替换并添加转换即可。right: 50%left: 50%
#textInput {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
transform: translate(-50%,-50%)
}
0赞
Saikat Roy
8/4/2022
#2
如果合适，您可以使用此技术。
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
body { background-color: black; }
.center{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#textInput {
position: absolute;
width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digturd.io</title>
</head>
<body>
<div class="center">
<input id="textInput" type="text">
</div>
</body>
</html>
0赞
Naren Murali
8/4/2022
#3
由于您想将其居中在正文中使用，因此它将使用视口的宽度进行计算，同时使用视口高度和宽度设置标签的高度和宽度。vh and vwhtml and body
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
html, body { background-color: black; width:100vw; height:100vh; margin: 0; }
#textInput {
position: absolute;
top: 50vh;
right: calc(50vw - 150px);
width: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digturd.io</title>
</head>
<body>
<input id="textInput" type="text">
</body>
</html>
0赞
Usman Arshad
8/4/2022
#4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Digturd.io</title>
</head>
<body>
<input id="textInput" type="text">
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
body {
background-color: black;
margin: 0px;
padding: 0px;
}
#textInput {
position: absolute;
top: 50%;
left: calc(50% - 150px);
width: 300px;
}
0赞
Suman Parajuli
8/4/2022
#5
水平居中的最简单方法是将属性用于父元素。text-align: center
<div class="textInputDiv">
<input id="textInput" type="text">
</div>
并在其上应用此 css，其中属性将确保其子项在水平方向上居中。并将您的输入框垂直居中。text-align: centerposition: absolute; top: 50%;
body { background-color: black; }
.textInputDiv{
text-align: center;
height: 100vh;
width: 100%;
position: absolute;
top: 50%;
}
评论