Center this div

Question

Iv'e been fondling this code for hours and have gained no advil.

Originally i thought, "Hey make a table and vertically transform that piece of ..." but apparently, either i'm a moron that's doing it wrong or.. yeah i'm just an idiot.

<html>
     <head>
          <style type='text/css'>
     html, body{
          margin:0;
          padding:0;
          display:table;
     }
     #centerme{
          display:table-cell;
          vertical-align: middle;
          height:100px;
          width:100px;
     }
     </style>
 </head>
     <body>
          <div id='centerme'></div>
     </body>
</html>

I feel as if something treacherous is missing from this html.

I am not using CSS3 or any 3rd party libraries for CSS _does not work on all browsers

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

check this : http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div?rq=1 — Zakaria Wahabi, Mar 10 '15 at 16:35
possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Paulie_D, Mar 10 '15 at 16:49

score 1 · Answer 1 · answered Mar 10 '15 at 16:37

If you want both horizontal and vertical alignment, try this:

html, body {
    margin:0;
    padding:0;
}
#centerme {
    height:100px;
    width:100px;
    border:1px solid #999;
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

<div id='centerme'>center</div>

Anupam Basak · Answer 2 · 2015-03-10T16:42:32.900

0

Here is an example of vertical centering without using display: table

html, body{
  margin:0;
  padding:0;
}
#centerme{
  height:100px;
  width:100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;  /*  -(height/2)px  */
  border:1px solid;
}

<div id="centerme"></div>

edited Mar 10 '15 at 16:42

answered Mar 10 '15 at 16:33

Anupam Basak

1,503
11
13

That is not centred you need to account for the offset width and height of the element itself... – Ashley Medway Mar 10 '15 at 16:35
Sweet thanks man, works perfect. The js fiddle helped a lot with the comprehension. – THE AMAZING Mar 10 '15 at 16:37
Transform is CSS3 and not working on all browsers, your original table answer was what i was looking for. – THE AMAZING Mar 10 '15 at 16:38
Do you know the exact height of the div? – Anupam Basak Mar 10 '15 at 16:39

Center this div

2 Answers2