Vertically Centering A Div In Body?

July 30, 2023 Post a Comment

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 oth

Solution 1:

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

Solution 2:

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><divclass="container"><divclass="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/

Solution 3:

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 */	    
}

<formname="signup"class="signup"action="signup.php"style="border: 1px solid #000; "><inputtype="text"placeholder="Email"/><br><inputtype="text"placeholder="Username"/><br><inputtype="password"placeholder="Password"/><br><buttontype="submit">Next</button></form>

Related: Center a div in body

Solution 4:

this worked for me:

Style.css

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

I found this code snippet here.

Solution 5:

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><tableheight="100%"width="100%"border="1"><tr><td><formname="signup"class="signup"action="signup.php"style="border: 1px solid #000; "><inputtype="text"placeholder="Email"/><br><inputtype="text"placeholder="Username"/><br><inputtype="password"placeholder="Password"/><br><buttontype="submit">Next</button></form></td></tr></table></body></html>

Html5 Guide