Question

我尝试将<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>

Answer 1

一种简单的方法是将容器上的位置设置为相对，然后将输入上的位置设置为绝对值。然后只需将输入的顶部/右侧/底部/左侧设置为零，将边距设置为auto。不需要CSS3转换：

＆＃13;

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%;
}

＆＃13;

<header></header>
<main>
  <input type="text">
</main>

<footer></footer>

＆＃13;

Answer 2

您需要使用position: relative以外的position: absolute，... main input { position: relative; top: 50%; left: 20%; width: 60%; height: 3em; } ...除了父元素以外的整个屏幕为中心。请注意，这将使输入框的顶部位于中心。你需要将它向上移动一半的高度。

{{1}}

Answer 3

它应与transform:translateY(-50%)一起使用并提供main div position:relative。确保还包括不同的供应商前缀。

＆＃13;

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%;
		}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

<body>
  <header></header>
  <main>
    <input type="text">
  </main>

  <footer></footer>
</body>

</html>

＆＃13;

Answer 4

制定主要职位：亲属

和您的输入位置：绝对

＆＃13;

		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: 25%;
		  left: 20%;
		  width: 60%;
		  height: 3em;
		}
		footer {
		  background-color: #fafafa;
		  width: 100%;
		  height: 40%;
		}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

<body>
  <header></header>
  <main>
    <input type="text">
  </main>

  <footer></footer>
</body>

</html>

＆＃13;

中心输入元素水平和垂直

4 个答案: