html - 你如何在html中居中多个文本框

Question

在页面中间是我需要文本框的地方

标签： html

Answer 1

请参阅下面的代码片段以对齐页面中间的多个文本框。（考虑页面高度为 400px）

.main-div { 
  height: 400px;
  position: relative;
}

.sub-div {
 -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

input[type="text"] {
    margin:10px auto;
    border: 1px solid gray;
}

<div class="main-div">
  <div class="sub-div">
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </div>
</div>