CSS: Make an image in the exact middle of the page

Question

I would like to make an image center in the exact middle of the page, so it's centered vertical and horizontal! Can I do that with a 765x741? Thanks!

Did you search the web at all? http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ — Aaron McIver, Oct 28 '11 at 19:48
Yes! What have you tried already? Have you tried or looked at [any of these questions (and their answers)](http://stackoverflow.com/search?q=image+css+html+center+horizontal+vertical)? — David Thomas, Oct 28 '11 at 19:48

score 1 · Answer 1 · answered Oct 28 '11 at 19:48

1

Create css class for the image.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

answered Oct 28 '11 at 19:48

jdross

1,138
2
11
29

score 1 · Accepted Answer · answered Oct 29 '11 at 14:21

Yes of cause you can create a static class in CSS like suggested already:

.centerPic
{
    position:fixed;
    left: 50%;
    top: 50%;
    margin-left:-382px; /* Static value */
    margin-top:-370px; /* Static value */
}

But this approach limits your use of other pictures of different sizes. I suggest you set the margin-left and margin-top properties depending on your picture sizes in dynamic javascript instead:

function SetCenterStyle (objPic)
{
    objPic.className = "centerPic";
    objPic.style.marginLeft = ( -1 * ( parseInt(objPic.width) / 2 ) ) + "px";
    objPic.style.marginTop = ( -1 * ( parseInt(objPic.height) / 2 ) ) + "px";
}

(You can then of cause omit the margin-left and margin-top settings in the centerPic class)

Babul Mirdha · Answer 3 · 2013-05-24T07:56:08.750

0

I solved it this way:

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}

edited May 24 '13 at 07:56

answered May 24 '13 at 07:47

Babul Mirdha

3,688
1
21
24

score 0 · Answer 4 · answered Oct 28 '11 at 19:49

0

Yes you can! The following css will do it

.centerImg
{
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-382px /*half the width*/
    margin-top:-370px /*half the height*/
}

answered Oct 28 '11 at 19:49

Joseph Marikle

72,900
16
109
126

score 0 · Answer 5 · answered Oct 28 '11 at 20:01

0

use the margin: auto auto;

I thinks it's the best way

answered Oct 28 '11 at 20:01

GregM

2,626
3
19
37

CSS: Make an image in the exact middle of the page

5 Answers5