Вертикально центрируя div в теле?

Я попытался центрировать это вертикально в body (не горизонтально). Кроме того, я не хочу указывать высоты или что-то в этом роде. Я попробовал добавить обертку со 100% высотой и другими вещами, но нигде не попал. Не могли бы вы помочь мне исправить это?

jsFiddle Here

 <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>

Ответ 1

Смотрите эту отредактированную версию jsFiddle.

В принципе, просто оберните свой контент в <div class = "main"><div class = "wrapper"></div></div> и добавьте следующий CSS:

html, body {
    height: 100%;
}
.main {
    height: 100%;
    width: 100%;
    display: table;
}
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

Ответ 2

Обновление: codepen.io

form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}

<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>

Ответ 3

Если у вас есть flexbox, вы можете сделать это без использования display: table;

Пример кода:

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

<html>
  <body>
    <div class="container">
      <div class="content">
        This div will be centered
      </div>
    </div>
  </body>
</html>

Ответ 4

это сработало для меня:

style.css

div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Я нашел этот фрагмент кода здесь.

Ответ 5

A JSFiddle пример с табличной деформацией

В приведенном выше решении поставьте css для html и body с помощью "height: 100%", а затем оберните форму, которая будет центрирована вокруг таблицы.

Пример кода

<html>
<body>    
<table height="100%" width="100%" border="1">
    <tr>
    <td>
    <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">

                <input type="text" placeholder="Email"/><br>

                <input type="text" placeholder="Username"/><br>

                <input type="password" placeholder="Password"/><br>

                <button type="submit">Next</button>

            </form>
        </td>
        </tr>
</table>    
</body>
</html>