1

I try to align inputs and button vertically and horizontally on the page.

Usually css, provided below works nicely for block elements, but not for inputs.

Please see jsfiddle below: 

.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>
Systems Rebooter
  • 1,281
  • 2
  • 14
  • 30

2 Answers2

2

Change 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>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • I love how you used `transform: translate(-50%,-50%)` and learned something new! Thanks! Marked as accepted. I think you can omit `body, html` and `margin:0 auto` to simplify things, since those tags may have other styles. – Systems Rebooter Dec 27 '19 at 14:24
0

Simple way i used to do it.

.outer {
  width: 100%;
  height: 100vh;
}

.inner {
  width:200px;
  margin: auto;
  height:20vh;
  padding-top:30vh;
}

.input, .button {
  width: 100%;
}
<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>
Whoopix
  • 23
  • 7