中心输入元素，包括水平输入和垂直输入
中心输入元素，包括水平输入和垂直输入
提问于 2015-07-25 21:59:27
我试图将<input>元素集中在黑色<div>容器中，但它不起作用。我做错了什么？
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-07-25 22:07:33
一种简单的方法是将容器上的位置设置为相对位置，然后将输入上的位置设置为绝对值。然后，只需将输入的上/右/下/左设置为零，边距设置为auto。不需要CSS3转换：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 60%;
height: 3em;
margin: auto;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}<header></header>
<main>
<input type="text">
</main>
<footer></footer>
Stack Overflow用户
发布于 2015-07-25 22:03:15
您需要使用position: relative而不是position: absolute，它是基于父元素以外的整个屏幕对齐的。请注意，这将使输入框的顶部部分位于中间。你需要把它移到一半的高度。
...
main input {
position: relative;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
...Stack Overflow用户
发布于 2015-07-25 22:03:50
它应该与transform:translateY(-50%)一起工作，并给出main div position:relative。确保还包括不同的供应商前缀。
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position:relative;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31631553
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号