how to put image in center of html page?

Question

Possible Duplicate:
How to center div horizontally and vertically

I need to put image in center of html page, both vertical and horizontal ... been trying few stuff but seems to work fine. To get horizontal alignment I used <body style="text-align:center">

and it works fine, but what do with vertical alignment?

regards

I'm pretty sure this has been answered more than few times in here already. — Joonas, Jun 26 '12 at 11:18
http://stackoverflow.com/questions/10296015/how-to-center-div-horizontally-and-vertically — Alvaro, Jun 26 '12 at 11:19
Here's an example that works in IE7 (if it matters), unlike the usual `display: table-cell` answers, and with an image of unknown dimensions: http://stackoverflow.com/questions/10998614/ie7-vertically-align-middle-not-working/10998683#10998683 — thirtydot, Jun 26 '12 at 11:20
before asking questions just give 2 or 3 mints to SO or www.google.com — khurram, Jun 26 '12 at 11:37

score 23 · Accepted Answer · edited Oct 21 '13 at 17:53

23

If:

X is image width,
Y is image height,

then:

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(X/2)px;
    margin-top: -(Y/2)px;
}

But keep in mind this solution is valid only if the only element on your site will be this image. I suppose that's the case here.

Using this method gives you the benefit of fluidity. It won't matter how big (or small) someone's screen is. The image will always stay in the middle.

edited Oct 21 '13 at 17:53

DreadPirateShawn

8,164
4
49
71

answered Jun 26 '12 at 11:20

Mateusz Kocz

4,492
1
25
27

where is X in this code??? – AminM Oct 21 '13 at 17:49
5

If you don't know the size of the image, then just replace `margin-left` and `margin-top` lines with this: `transform: translate(-50%, -50%);` – Fahri Azimov Apr 07 '15 at 04:33

score 9 · Answer 2 · answered Jun 26 '12 at 13:15

Put your image in a container div then use the following CSS (changing the dimensions to suit your image.

.imageContainer{
        position: absolute;
        width: 100px; /*the image width*/
        height: 100px; /*the image height*/
        left: 50%;
        top: 50%;
        margin-left: -50px; /*half the image width*/
        margin-top: -50px; /*half the image height*/
    }

score 2 · Answer 3 · answered Jun 26 '12 at 11:17

2

Hey now you can give to body background image

and set the background-position:center center;

as like this

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}

answered Jun 26 '12 at 11:17

Rohit Azad Malik

31,410
17
69
97

didn't work for me – Manu Chadha Jan 28 '17 at 08:02

score 1 · Answer 4 · answered Jun 26 '12 at 13:20

1

There are a number of different options, based on what exactly the effect you're going for is. Chris Coyier did a piece on just this way back when. Worth a read:

http://css-tricks.com/perfect-full-page-background-image/

answered Jun 26 '12 at 13:20

Eamonn

1,338
2
21
53

how to put image in center of html page?

4 Answers4