web-dev-qa-db-ja.com

divを垂直方向に中央揃えにしますか？

私はこれを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>​
htmlcsscentering
20
Hunter Mitchell

この編集済みの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;
}
48
Chris

更新： 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>​

関連： 本体のdivを中央揃え

8
antelove

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>

たーだ！垂直方向と水平方向に中央揃えのコンテンツ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 /

5
Rob Waring

これは私のために働きました：

Style.css

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

私はこのコードスニペット here を見つけました。

1
SeppeDek

A 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>

0
bhatanant2