Add centered box in html

Question

I tried adding a centered box in html/css using a div and specifying a class for it. I then specified the height and width for the class and set the margin for 0 auto; however all I am getting is a white rectangle that spans the entire width of my page in the top, not a centered box. My css is:

    .rectangle {
    height: 700px;
    width: 700px;
    margin: 0 auto;
    }

Any insight is appreciated. Thanks

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Vadim Ovchinnikov, Jul 15 '17 at 11:57

score 1 · Accepted Answer · answered Jul 15 '17 at 11:11

1

Your rectangle is there and it's nicely centered.

You just need to make it visible. Giving a background-color should do the trick

.rectangle {
  height: 700px;
  width: 700px;
  margin: 0 auto;
  background-color: black;
}

See CodePen Demo

answered Jul 15 '17 at 11:11

Dan Kreiger

5,358
2
23
27

Thanks. That really helped! Do you have any idea why my background turns white when I put the box there? – skyper12345 Jul 15 '17 at 11:12
@skyper No problem :) The default css background color is `transparent`. Unless you specify a color, it will default to `transparent` and therefore will not be visible - https://www.w3schools.com/cssref/pr_background-color.asp – Dan Kreiger Jul 15 '17 at 11:22
So how would I change the background back to the image while keeping the box? – skyper12345 Jul 15 '17 at 11:27
You could use `background-image` or `background` instead of `background-color` - I updated the [Demo](https://codepen.io/dankreiger5/pen/KqEEgj) with an image. Is that what you mean? – Dan Kreiger Jul 15 '17 at 11:38
I figured it out. Thanks for all your help – skyper12345 Jul 15 '17 at 12:41

score -1 · Answer 2 · answered Jul 15 '17 at 11:29

-1

The default background color is Transparent in html.Please check here

answered Jul 15 '17 at 11:29

Rahul Pandey

36
4

Add centered box in html

2 Answers2