How to position a div block in the middle of the page?

Hi there,
Is there any easy way to position a div block in the middle of the page ?

<div class="teddybear">
    My Lovely Teddy Bear

width: 300px;
height: 300px;
background-color: #bfbfbf;

Yep, quite a few ways to do that. Context is everything, though. Is that the only content on the page, or is this part of a larger template?

It’s just a learning experience, so yes, this is the only content in the page.

This should do the job for you

div.teddybear {
  margin: 0px auto;

Hi there vega003,

here you go…


untitled document html,body { display:table; width:100%; height:100%; margin:0; } body { display:table-cell; vertical-align:middle; } #teddybear{ width:260px; padding:20px; margin:auto; background-color:#bfbfbf; }
My Lovely Teddy Bear


There are some more suggestions here:

Or more here.

div.teddybear {
margin: 0px auto;

worked. Thank you so much for your help.

O, right. So you only wanted it horizontally centered? That’s a bit easier. :slight_smile:

to make more clear about that css.
The magic is the margin:0px auto;
for example you have a screen with 1000px width. Your content has 960px width, then you put the margin at top 0px, margin-left and right auto it will bring your content to center with margin-left:20px and margin-right:20px

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.