Vertically centering a div in body?

后端未结

关注

 5  2110

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

相关标签:

5条回答

梦谈多话

2020-12-14 03:02

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>

0 讨论(0)

天涯浪人

2020-12-14 03:09
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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2020-12-14 03:10
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

青春惊慌失措

2020-12-14 03:15

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

0 讨论(0)

余生分开走

2020-12-14 03:20
this worked for me:

Style.css
```
div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
```
I found this code snippet here.
0 讨论(0)
发布评论:

提交评论
- 加载中...