Centering image horizontally and vertically

Question

Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div

I am trying to make an image gallery on my website, but I cannot center the image inside the div.

The CSS for the div is:

#animation
{
display : none;
position: absolute;
z-index:1;
background : rgba(0,0,0,0.7);
height: 100%;
width: 100%;
border: 0px;
}

And the image id is:

#pictures
{
...
}

duplicate of [http://stackoverflow.com/questions/388180](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — RAN, Jul 29 '12 at 17:27

score 2 · Answer 1 · edited Jul 29 '12 at 20:05

2

One way to do it is a table cell display and vertical align: middle;

edited Jul 29 '12 at 20:05

Mr. Alien

answered Jul 29 '12 at 17:14

Andy

1

what about horizontal aligning – bugwheels94 Jul 29 '12 at 17:18
2

My fiddle includes that too, I used `margin: 0 auto;` (this only works if you declare the image as a block level element (`display: block;`) – Andy Jul 29 '12 at 17:19
yeah , I tried this but the things is that when I declare table cell the div will not take the (display:none) and the div won't hide. – southpaw93 Jul 30 '12 at 11:22
I cant help much without context, but you could try visibility: hidden, or absolute position and throw the image off the screen with a -value on left: – Andy Jul 30 '12 at 11:24

score 0 · Answer 2 · answered Jul 29 '12 at 17:15

0

margin:auto; add autommatic margin and center the image have a try, but I need more code , could you post it?

answered Jul 29 '12 at 17:15

Xenione

Dejo Dekic · Answer 3 · 2012-07-29T17:26:54.980

0

Put your image inside div and center it like this: Fiddle here

 div{
 width:300px;
 height:300px;
 margin:0px auto;
 margin-top:30px; //to pull it down
 }

edited Jul 29 '12 at 17:26

answered Jul 29 '12 at 17:16

Dejo Dekic

how can you be so confirmed about margin-top:20px; – bugwheels94 Jul 29 '12 at 17:18
It is just an example to position this div... – Dejo Dekic Jul 29 '12 at 17:19
not being rude but this is a bad example – bugwheels94 Jul 29 '12 at 17:20
Can you please explain why is this example bad?THX!! – Dejo Dekic Jul 29 '12 at 17:34
yes because you have settled margin-top yourself what is the parent container has a height of 1000px; – bugwheels94 Jul 29 '12 at 17:50
You are right I didn't see it. Damn... – Dejo Dekic Jul 29 '12 at 17:55

user1461067 · Answer 4 · 2012-07-29T17:21:59.730

0

margin:auto;

it will automatically center your div by adding equal margin to the left and right of your div block element

edited Jul 29 '12 at 17:21

answered Jul 29 '12 at 17:16

user1461067

score 0 · Answer 5 · edited May 23 '17 at 12:03

0

Check out these resources:

edited May 23 '17 at 12:03

Community

answered Jul 29 '12 at 17:22

Freddy

5 Answers5