Vertically centering a div in body?
Question
I have tried to center this vertically in body (not horizontally). Also, I do not want to specify heights or anything like that. I tried adding a wrapper with a 100% height and other things, but got nowhere. Can you please help me fix this?
<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>
7 answers
solution1
57 ACCPTED 2012-10-07 19:27:03
See this edited version of your jsFiddle .
Basically, just wrap your content in <div class = "main"><div class = "wrapper"></div></div> , and add the following CSS:
html, body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
solution2
13 2016-11-29 14:27:45
If you have flexbox available, you can do it without using display: table;
Code example:
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! Vertically and horizontally centered content div. JSFiddle: https://jsfiddle.net/z0g0htm5/ .
Taken mostly from https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ and https://css-tricks.com/snippets/css/a-guide-to-flexbox/
solution3
12 2017-09-23 01:41:33
Update: codesandbox.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>
Related: Center a div in body
solution4
1 2016-08-25 01:32:37
this worked for me:
Style.css
div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I found this code snippet here .
solution5
1 2022-05-19 21:09:49
You can indeed center vertically and horizontally the single container without a wrapper. The key is to understand what 100% height and width mean. It means the percentage of the parent element. You must chain percentages upward the hierarchy until you hit the actual viewport height and width.
HTML Element <---> BODY Element <----> DIV Element
100% of height in the DIV looks up the height of BODY, which in turn looks up the height of HTML, which in turn looks up the size of the viewport. In order for it to work properly, you cannot combine HTML and BODY in CSS, but rather address them separately.
* { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; width: 100%; } body { height: 100%; width: 100%; } div { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
<html> <body> <div> Center me! </div> </body> </html>
solution6
0 2012-10-07 19:26:38
A JSFiddle example with table warp
In the above solution, Provide css for html & body with "height: 100%" and then wrap the form that to be centered around a table.
Code sample
<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>
solution7
-2 2022-04-14 07:38:08
css: width : 200px; margin 0 auto;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.