28

これを（水平ではなく）垂直に中央に配置しようとしましたbody。また、高さなどを指定したくありません。高さ100％のラッパーなどを追加してみましたが、どこにも行きませんでした。これを修正するのを手伝ってもらえますか?

ここでjsFiddle

 <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>​
4

5 に答える 5

55

この編集されたバージョンの 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;
}
于 2012-10-07T19:27:03.513 に答える
13

フレックスボックスが利用可能な場合は、使用せずに実行できます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>

タダ！垂直方向および水平方向に中央揃えされたコンテンツ div。JSFiddle: https://jsfiddle.net/z0g0htm5/ .

主にhttps://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/およびhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/から取得

于 2016-11-29T14:27:45.130 に答える
0

テーブル ワープを使用したJSFiddleの例

上記のソリューションでは、html と body に css を提供"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>

</p>

于 2012-10-07T19:26:38.267 に答える