CSS align center

Question

I have a div that is width 100% and height 100%. Inside I have a 200px x 200px div. I'd like the 200px x 200px to align to the vertical and horizontal center of the outer div. Like in Photoshop when you align to the vertical or horizontal center. I've only been able to align from the edges so far. Is this possible?

Thanks

Could you please share your code... – vignesh Jul 01 '16 at 06:26 — vignesh, Jul 01 '16 at 06:26

score 1 · Accepted Answer · answered Jul 01 '16 at 06:28

1

You can use margin:0 auto; for set automatic margin according to your page position.

answered Jul 01 '16 at 06:28

Kalu Singh Rao

1,671
1
16
21

Note: this will only work as long as a width is set! If the element does not have a set width, it will not be centered. – blackandorangecat Jul 01 '16 at 06:59

Zakriya Bilal · Answer 2 · 2016-07-01T06:46:05.097

0

One solution can be as follows:

HTML:

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS:

#parent {display: table;}

#child {
  display: table-cell;
  vertical-align: middle;
  margin: auto;
}

Do Note: CSS tables are not the same as HTML tables.

edited Jul 01 '16 at 06:46

answered Jul 01 '16 at 06:29

Zakriya Bilal

135
2
8

score 0 · Answer 3 · edited Jul 01 '16 at 10:27

0

<div>
   <div class="two">
   </div>
</div>

and css

.two{
  margin: auto;
  vertical-align:middle;
}

edited Jul 01 '16 at 10:27

Parag Bhayani

3,280
2
28
52

answered Jul 01 '16 at 06:32

Fred

1

CSS align center

3 Answers3