191

I want to position a <div> (or a <table>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.

I have tried the following but it is not working:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Note:
It is either way fine if the <div> element (or <table>) scrolls with the website or not. Just want it to be centered when the page loads.

JGallardo
  • 11,074
  • 10
  • 82
  • 96
sumit
  • 10,935
  • 24
  • 65
  • 83
  • 1
    possible duplicate of [How to align a
    to the middle of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page)
     – Purag Mar 25 '12 at 17:10
  • Hi Purmou, the question you mentioned if for positioning at the middle of the page, i.e. left and right side equal space -- not the top and bottom space equal! – sumit Mar 25 '12 at 17:15
  • 1
    possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) – outis Mar 26 '12 at 00:23
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – bjb568 Mar 24 '14 at 08:06

14 Answers14

255

The easy way, if you have a fixed width and height:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

einstein
  • 13,389
  • 27
  • 80
  • 110
  • 18
    For those seeking a dynamic height: http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css#6182661 – pulkitsinghal Aug 20 '13 at 20:20
  • 1
    @woho87 why not use inline styles? for the well known reasons or is there something more that i should know for the specific example? – Sharky Apr 03 '14 at 13:17
  • @KatrinRaimond it's for the well-known reasons, documented here http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css and here http://webdesign.about.com/od/css/a/aa073106.htm. – Alex Apr 12 '15 at 00:02
  • But, setting the divElement's top in '%' unit makes the divElement takes up vertical space unless divElement is placed inside a relative element. – sudip Sep 08 '15 at 12:13
  • is position:fixed or position:absolute? – Kurkula Apr 19 '16 at 01:13
  • While this was the optimal answer for some time, nowdays CSS is easier as mentioned in @caps_lock answer – asiop Jun 12 '17 at 10:25
212

With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Easy! JSFiddle here: http://jsfiddle.net/LgSZV/

Update: Check out https://css-tricks.com/centering-css-complete-guide/ for a fairly exhaustive guide on CSS centering. Adding it to this answer as it seems to get a lot of eyeballs.

XwipeoutX
  • 4,765
  • 4
  • 29
  • 41
  • 1
    If the content in the popup is using `overflow:auto`, scrolling is screwed up in IE9. :( – joescii Apr 10 '14 at 18:49
  • 2
    Not so ubiquos. IE8 stills [20% of the browser share](http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0) and [don't support it](http://caniuse.com/#search=transforms). So only take this one for IE9+. – fotanus May 07 '14 at 02:49
  • 9
    +1 for being the only solution where you don't have to specify height and width or use Javascript. – Jan Derk Sep 11 '14 at 20:18
  • @fotanus when developers stop supporting IE 9 < users will either migrate or update their browser. – Diego Vieira Mar 26 '15 at 14:17
  • @DIegoVieira this is unfortunately not how things work. See [the tragedy of the commons](http://en.wikipedia.org/wiki/Tragedy_of_the_commons). So people will continue supporting IE8 because don't want to lose this share, and people will continue using because it works. – fotanus Mar 26 '15 at 17:08
  • `position:fixed` is useful when you have long page with scroll! – Max Mar 30 '15 at 17:37
  • `translate` will make your font blurry, and it's not easy to fix (solutions don't always work) https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry – Dzmitry Lazerka Jun 12 '17 at 23:03
  • more details here: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ – OLIVIERS Apr 18 '22 at 18:52
41

Set the width and height and you're good.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX's answer.

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
41

It will work for any object. Even if you don't know the size:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
luminousmen
  • 1,971
  • 1
  • 18
  • 24
28

Now, is more easy with HTML 5 and CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>
Daniel De León
  • 13,196
  • 5
  • 87
  • 72
19

Use flex. Much simpler and will work regardless of your div size:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>
Caner
  • 57,267
  • 35
  • 174
  • 180
13

If you have a fixed div just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively. Adjust to your needs:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
elclanrs
  • 92,861
  • 21
  • 134
  • 171
8

I would do this in CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

then in HTML:

<div class="centered"></div>
Eduardo Lago Aguilar
  • 763
  • 7
  • 7
3

Now you can do this using grid layout with fewer lines of code.

.center-this{
  display: grid;
  place-items: center;
  align-content: center;
}
<div class="center-this">
  <div>
    Hello
  </div>
</div>
Nishan
  • 3,644
  • 1
  • 32
  • 41
1

try this

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Or this

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>
Dali
  • 31
  • 2
0

If there are anyone looking for a solution,

I found this,

Its the best solution i found yet!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Hope you enjoy!

Christopher Atwood
  • 11
  • 1
0

Another easy flexible approach to display block at center: using native text alignment with line-height and text-align.

Solution:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

And html sample:

<div class="parent">
  <div class="child">My center block</div>
</div>

We make div.parent fullscreen, and his single child div.child align as text with display: inline-block.

Advantages:

  • flexebility, no absolute values
  • support resize
  • works fine on mobile

Simple example on JSFiddle: https://jsfiddle.net/k9u6ma8g

Pavel Shorokhov
  • 4,485
  • 1
  • 35
  • 44
0

Alternative solution that doesn't use position absolute:
I see a lot of position absolute answers. I couldn't use position absolute without breaking something else. So for those that couldn't as well, here is what I did:
https://stackoverflow.com/a/58622840/6546317 (posted in response to another question).

The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.

reddtoric
  • 568
  • 1
  • 6
  • 13
-2

try this:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
user3423956
  • 35
  • 5