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

HTML & CSS
1

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
</div>

.teddybear{
width: 300px;
height: 300px;
background-color: #bfbfbf;
}

2

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?

3

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

4

This should do the job for you

div.teddybear {
  margin: 0px auto;
}
5

Hi there vega003,

here you go…

[code]

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
[/code]

coothead

6

There are some more suggestions here: https://css-tricks.com/centering-percentage-widthheight-elements/

7

Or more here.

8

Guys,
div.teddybear {
margin: 0px auto;
}

worked. Thank you so much for your help.

9

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

10

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

11

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