29

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?

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>​
8
  • 1
    when it comes to heighs the fast answer is always "you can't". Html pages are intended to be vertically scrolled and heights should be free to change according to the content. So there's no proper way to center your div vertically with css and html. allthought there can be some javascript/jQuery workarounds if you're keen to learn that. Oct 7, 2012 at 19:19
  • There is no overflow on the website..so, why is there not a way to vertically align a div? Oct 7, 2012 at 19:21
  • 1
    What about wrapping it in a table and using the valign attribute? '<td valign="top|middle|bottom|baseline">' also there is more information here that you might find useful. phrogz.net/css/vertical-align/index.html
    – Rhys
    Oct 7, 2012 at 19:22
  • 2
    Possible duplicate of stackoverflow.com/questions/59309/…
    – eddy147
    Oct 7, 2012 at 19:23
  • 1
    here's a jQuery fiddle example : jsfiddle.net/23NUC/3 Oct 7, 2012 at 19:29

7 Answers 7

61

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;
}
2
  • 1
    why do i have to have a main, wrapper, then my object...also, my body has a 100% height background image, and the height attribute makes it overflow. Oct 7, 2012 at 19:31
  • @EliteGamer The overflow is coming from padding or margins, remove them by setting margin: 0; padding: 0; or add a CSS Normalize to your page to avoid future issues. The two wrappers are necessary for centering; I'm afraid that's the only way to go if you don't want to use JavaScript.
    – Chris
    Oct 7, 2012 at 19:33
16

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/

1
  • I think this is the best answer. I wish I could upvote more than once. Nov 19, 2018 at 16:50
12

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

1

this worked for me:

Style.css

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

I found this code snippet here.

1

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>

0

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>

2
  • this doesn't look centered thought... why you post a fiddle which doens't do what was asked? Oct 7, 2012 at 19:30
  • 1
    sorry.. forgot to update the JSFiddle... have updated the jsfiddle.net/23NUC/4
    – bhatanant2
    Oct 7, 2012 at 19:32
-2

css: width : 200px; margin 0 auto;

1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 14, 2022 at 8:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.