CSS - Div object centering?

Question

I'd simply like to center a DIV object to the browser screen.

It should be something like that I think..

<div id="root">
    <div id="centeredElement"></div>
</div>

div#root {
    width:100%; 
}
div#centeredElement {
    width:500px;
    height:200px;
    align:center;
}

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) — Dennis Traub, Aug 31 '12 at 08:15

score 3 · Accepted Answer · answered Aug 31 '12 at 08:14

3

text-align:center or margin:0 auto;

as like this

div#centeredElement{
text-align:center;
}

or

div#centeredElement{
margin:0 auto;
}

answered Aug 31 '12 at 08:14

Rohit Azad Malik

31,410
17
69
97

T.Todua · Answer 2 · 2018-12-13T06:23:52.660

2

you have several options to center a div, image or other object:

1) everything inside div

<div align="center"> blabla </div>

2) for images or frames

<img style="display:block;margin-left:auto;margin-right:auto;" align="center" src="xx.jpg" />

3) another:

<div style="width:80%;margin-left:10%;"> blabla </div>

edited Dec 13 '18 at 06:23

answered Mar 26 '13 at 09:27

T.Todua

53,146
19
236
237

1

The tag is deprecated as of HTML5 – RAZERZ Feb 11 '18 at 15:07

score 1 · Answer 3 · answered Aug 31 '12 at 08:14

1

Change

align:center

to

margin: 0px auto;

answered Aug 31 '12 at 08:14

ragklaat

926
5
12

CSS - Div object centering?

3 Answers3