Html 垂直和水平对齐输入和按钮

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

通常，下面提供的css可以很好地用于块元素，但不能用于输入

请参阅下面的JSFIDLE：

.outer{
位置：相对位置；
宽度：100%；
身高：100%；
}
.内部{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
.输入，.按钮{
宽度：200px；
显示：块；
}

按钮

更改CSS

body，html{
身高：100%；
保证金：0；
}
.外部{
位置：相对位置；
宽度：100%；
身高：100%；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}
.输入，.按钮{
宽度：200px；
显示：块；
保证金：0自动；
}

按钮

更改CSS

body，html{
身高：100%；
保证金：0；
}
.外部{
位置：相对位置；
宽度：100%；
身高：100%；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）
}
.输入，.按钮{
宽度：200px；
显示：块；
保证金：0自动；
}

按钮

我过去做这件事的简单方法

.outer{
宽度：100%；
高度：100vh；
}
.内部{
宽度：200px；
保证金：自动；
高度：20vh；
填充顶部：30vh；
}
.输入，.按钮{
宽度：100%；
}

按钮

我过去做这件事的简单方法

.outer{
宽度：100%；
高度：100vh；
}
.内部{
宽度：200px；
保证金：自动；
高度：20vh；
填充顶部：30vh；
}
.输入，.按钮{
宽度：100%；
}

按钮

我喜欢你如何使用

转换：翻译（-50%，-50%）

并学到了一些新东西！谢谢标记为接受。我想你可以省略

body、html

和

margin:0 auto

来简化事情，因为这些标签可能有其他样式。我喜欢你使用

transform:translate（-50%，-50%）

和学到新东西的方式！谢谢标记为接受。我想你可以省略

body、html

和

margin:0 auto

来简化事情，因为这些标签可能有其他样式。谢谢。但这是行不通的。尝试运行代码段，然后将其展开为完整页面谢谢。但这是行不通的。尝试运行代码段，然后将其展开到整个页面