How to center the contents of a div

Question

I have a very simple problem, but I can't seem to solve it. I have a table inside a div, which is the main element. Now I have a td tag inside the table with a width and hight set to that of an iphone screen size. Now I basically want to center that table with its td cell within the div tag, so that the 'screen' will be centered in any browser window. How do I do that?

Replacing that div with a table solved my problem, but I would like to use a div instead.

Thank You

Step 1: Stop using [layout tables](http://www.hotdesign.com/seybold/). — Quentin, Apr 04 '12 at 10:47
@Quentin, most of the email clients dont understand `div`, `padding` etc. Using table layout for email templates has helped in several cases. How we can exclude tables in email-template designing ? — tusar, Apr 04 '12 at 11:19
@DextrousDave i have made some changes in your code so you are expecting this ? http://jsfiddle.net/Ewfkk/15/#update — Shailender Arora, Apr 04 '12 at 11:22
@tusar — The question mentions "browsers", why bring up email clients? — Quentin, Apr 04 '12 at 11:58
@Quentin, just curiosity. wanted to know is there any alternatives while email-template designing. — tusar, Apr 04 '12 at 12:02

score 8 · Accepted Answer · edited Dec 06 '12 at 11:48

8

Try this one , I do this code - Demo here, Very easy and simple code ( I have used a hack code and extra span tag for only IE old version) http://jsfiddle.net/ERuX4/1/

<div class="demo wraptocenter">
   <span></span>
   <img src="http://www.spitzer.caltech.edu/images/twitter.png?1295473781" alt="" />
</div>

css

.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/*End wraptocenter - image Vcenter  patch styles*/    
.demo  {
         width:100px;
         height:100px;
         border:1px solid red;
         position:absolute;
         top:50%;
         left:50%;
         margin-top:-100px;
         margin-left:-100px;}

edited Dec 06 '12 at 11:48

arun

3,667
3
29
54

answered Apr 04 '12 at 11:20

ShibinRagh

6,530
4
35
57

1

nice @ShibinRagh. +1 from me. but please edit your answer and post your code along with demo link. – tusar Apr 04 '12 at 11:22
thank you, but if you test the code, the parent element(div) is aligned in the top-left corner of the browser window. I want it to be dead center, in the middle of any browser screen – DextrousDave Apr 04 '12 at 11:46
Hi. Yes you are definitely in the right direction, but I do not want any white space outside of the red border. I basically want the background an image, that covers the whole browser windows, with my element in the center of the screen, vertically and horizontally. I tried to use your last code into my design, but I'm still having problems – DextrousDave Apr 04 '12 at 17:08
1

thank you. I finally got your code to work. Thank you, you got me going in the right direction. I still just need to figure out why IE9 does not want to recognize my border-radius, -webkit-border-radius and -moz-border-radius, when Chrome and firefox does. – DextrousDave Apr 04 '12 at 17:30
code should be posted in an answer, not a link to code – dldnh Apr 04 '12 at 17:51

score 0 · Answer 2 · answered Apr 04 '12 at 10:48

0

<style type="text/css">
.outer { width:800px; height:640px; }
.inner {
    position:relative; top:50%; left:50%;
    width: 320px;
    margin-left: -160px; /* half the width */
    height: 240px;
    margin-top: -120px; /* half the height */
</style>

<div class="outer">
    <div class="inner">I'm centered!</div>
</div>

answered Apr 04 '12 at 10:48

landons

9,502
3
33
46

Thank you, but your code does not work. I also don't want to use fixed sizes for the outer div. I want the inner div to be a specific size, and also be centered relative to the browser windows on any screen – DextrousDave Apr 04 '12 at 11:18
Play with it a little. That should get you started on the approach, does it not? – landons Apr 04 '12 at 11:52
yes thank you. will try to see if I can get it to work – DextrousDave Apr 04 '12 at 12:11

score 0 · Answer 3 · edited Jul 22 '12 at 11:58

0

try this:

div#centerlayout 
{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    height:XXXpx; 
    width:XXXpx; 
    margin-top:-XXXpx; 
    margin-left:-XXXpx; 
}

edited Jul 22 '12 at 11:58

Nikola K.

7,093
13
31
39

answered Apr 04 '12 at 10:50

Marco

22,856
9
75
124

score 0 · Answer 4 · answered Apr 04 '12 at 11:14

0

HTML

    <div class="img_thumb">
    <table>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
    </table>
</div>

CSS

.img_thumb {
    background: none repeat scroll 0 0 red;
    display: table-cell;
    height: 200px;
    vertical-align: middle;
    width: 200px;

}
table {
    border: 1px solid;
    width: 100px;
    margin:auto;
}

or see the demo:- http://jsfiddle.net/QHEnL/16/

answered Apr 04 '12 at 11:14

Shailender Arora

7,674
2
31
35

I actually like this one the best, but, I do not want the red background to be a fixed width and height. I want the background to cover any browser screen, so basically width: 100% and height: 100%; but when I set it as 100%, it takes on the size of the table(the red background that is) – DextrousDave Apr 04 '12 at 12:14

score 0 · Answer 5 · edited Oct 20 '12 at 09:10

0

I haven't tested in IE (works in FF and Safari), but if you're using jQuery you could use this to center a div with the class page within the page:

var pageMargin = ($(document).width() - $("div.page").width()) / 2;
$("div.page").css("margin-left", pageMargin).css("margin-right", pageMargin);

edited Oct 20 '12 at 09:10

ЯegDwight

24,821
10
45
52

answered Jun 01 '12 at 21:01

Aaron Tyler

161
1
2

How to center the contents of a div

5 Answers5

Linked