webentwicklung-frage-antwort-db.com.de

Ein Div im Körper vertikal zentrieren?

Ich habe versucht, dies vertikal in body (nicht horizontal) zu zentrieren. Ich möchte auch keine Höhen oder ähnliches angeben. Ich habe versucht, einen Wrapper mit einer Höhe von 100% und andere Dinge hinzuzufügen, habe aber nichts erreicht. Können Sie mir bitte helfen, das Problem zu beheben?

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>​
17
Hunter Mitchell

Siehe diese bearbeitete Version von jsFiddle .

Umhüllen Sie Ihren Inhalt grundsätzlich in <div class = "main"><div class = "wrapper"></div></div> und fügen Sie das folgende CSS hinzu:

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

Update: jsFiddle

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

Verwandte: Zentrieren Sie ein Div im Körper

6
antelove

Wenn Sie über flexbox verfügen, können Sie dies auch ohne display: table; tun.

Code-Beispiel:

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>

Ta-da! Vertikal und horizontal zentrierter Inhalt div. JSFiddle: https://jsfiddle.net/z0g0htm5/ .

Meist aus https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ und https://css-tricks.com/snippets/css/a-guide- Flexbox/

5
Rob Waring

das hat für mich funktioniert:

Style.css

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

Ich habe diesen Code-Ausschnitt hier gefunden.

1
SeppeDek

A JSFiddle Beispiel mit Table Warp

Stellen Sie in der obigen Lösung css for html & body mit "height: 100%" bereit, und wickeln Sie dann das zu zentrierende Formular um eine Tabelle.

Codebeispiel 

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

Das

0
bhatanant2