html - 垂直和水平对齐输入和按钮

Question

我尝试在页面上垂直和水平对齐输入和按钮。

通常，下面提供的 css 非常适用于块元素，但不适用于输入。

请参阅下面的jsfiddle：

.outer {
  position: relative;
  width: 100%;
  height: 100%;
}

.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.input, .button {
  width: 200px;
  display: block;
}

<div class="outer">
  
  <div class="inner">
  
    <input type="text" class="input">
    <input type="text" class="input">
    <button type="text" class="button">Button</button>
  
  </div>
</div>

标签： htmlcss

Answer 1

更改 CSS

body,html{
height:100%;
margin:0;
}
.outer {
  position: relative;
  width: 100%;
  height: 100%;
}

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

.input, .button {
  width: 200px;
  display: block;
  margin:0 auto;
}

<div class="outer">
  
  <div class="inner">
  
    <input type="text" class="input">
    <input type="text" class="input">
    <button type="text" class="button">Button</button>
  
  </div>
</div>