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?

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>

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. — Carlo Moretti, Oct 07 '12 at 19:19
There is no overflow on the website..so, why is there not a way to vertically align a div? — Hunter Mitchell, Oct 07 '12 at 19:21
What about wrapping it in a table and using the valign attribute? '' also there is more information here that you might find useful. http://phrogz.net/css/vertical-align/index.html — Rhys, Oct 07 '12 at 19:22
Possible duplicate of http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div — eddy147, Oct 07 '12 at 19:23
@Rhys i would like to avoid the use of tables if possible. Or, could you give me a jsfiddle example to look at? Thanks! — Hunter Mitchell, Oct 07 '12 at 19:23
I have to head to work, but there are some examples on this page that should help. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html — Rhys, Oct 07 '12 at 19:26
here's a jQuery fiddle example : http://jsfiddle.net/23NUC/3/ — Carlo Moretti, Oct 07 '12 at 19:29
Wouldn't it be wonderful if the people over at W3 decided to add a `vertical-positioning` CSS property with `initial`, `inherit`, `top`, `bottom`, and `middle`? — Radvylf Programs, Nov 19 '18 at 16:36

score 61 · Accepted Answer · answered Oct 07 '12 at 19:27

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

answered Oct 07 '12 at 19:27

Chris

26,544
5
58
71

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. – Hunter Mitchell Oct 07 '12 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](http://fiddle.jshell.net/css/normalize.css) 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 07 '12 at 19:33

score 16 · Answer 2 · edited Jan 07 '19 at 11:26

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/

I think this is the best answer. I wish I could upvote more than once. — Radvylf Programs, Nov 19 '18 at 16:50

antelove · Answer 3 · 2020-04-21T09:30:22.280

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

score 1 · Answer 4 · answered Aug 25 '16 at 01:32

1

this worked for me:

Style.css

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

I found this code snippet here.

answered Aug 25 '16 at 01:32

SeppeDek

21
1
5

score 1 · Answer 5 · answered May 19 '22 at 21:09

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>

score 0 · Answer 6 · answered Oct 07 '12 at 19:26

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>

this doesn't look centered thought... why you post a fiddle which doens't do what was asked? — Carlo Moretti, Oct 07 '12 at 19:30
sorry.. forgot to update the JSFiddle... have updated the http://jsfiddle.net/23NUC/4/ — bhatanant2, Oct 07 '12 at 19:32

score -2 · Answer 7 · answered Apr 14 '22 at 07:38

-2

css: width : 200px; margin 0 auto;

answered Apr 14 '22 at 07:38

Shardoola S Konandur

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](/help/how-to-answer). – Community Apr 14 '22 at 08:53

Vertically centering a div in body?

7 Answers7

Linked

Related