Center input element both horizontally and vertically

Question

I try to center the <input> element in the black <div> container, but it doesn't work. What am I doing wrong?

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>

score 1 · Accepted Answer · answered Jul 25 '15 at 22:07

An easy method is to set the position on the container to relative, then set the position on the input to absolute. Then just set the top/right/bottom/left of the input to zero, and margin to auto. No CSS3 transforms needed:

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

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

<footer></footer>

score 0 · Answer 2 · answered Jul 25 '15 at 22:03

You need to use position: relative other than position: absolute, which is centering based on the entire screen other than the parent element. Note that this will make the top part of the input box in the center. You will need to move it up a little bit by half it's height.

...
main input {
  position: relative;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 3em;
}
...

score 0 · Answer 3 · answered Jul 25 '15 at 22:03

It should work with transform:translateY(-50%) and give the main div position:relative . Make sure to also include the different vendor prefixes.

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

<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

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

  <footer></footer>
</body>

</html>

score 0 · Answer 4 · answered Jul 25 '15 at 22:04

Make main position: relative

and your input position :absolute

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

<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

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

  <footer></footer>
</body>

</html>

Center input element both horizontally and vertically

4 Answers4