Center Image Vertical and Horizontal

5

votes

I tend to do this every web site I design I do, but I have yet to actually find a real good way to do it. A company usually gives me their logo, I center it in the middle of the screen for when you go to the page, and then it auto forwards you to the home page. I can not seem to find a good way to center an image in the middle of the screen without a bunch of tables and divs! Any good suggestions?!

css

possible duplicate of Image center align vertically and horizontally – dsgriffin

more ways of vertical centering: blog.themeforest.net/tutorials/vertical-centering-with-css – Robin Manoli

8

votes

You could try using a div in your HTML like this:

<div id='dv'></div>

And using a background image like this:

#dv {
    background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
    background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
    width:100%;
    height:100%;
}

Fiddle

4

votes

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}

<body>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />   
</body>

Related: Center a div

1

votes

Personally, I like using the display: table-cell method.

For example, if my HTML is:

<div class="wrapper">
     <img src="http://placehold.it/150x50" alt="Company ABC" />
</div>

Then my CSS should be:

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 600px;
    height: 200px;
}

If I'm unable to use the above method, another viable option is to use the line-height property.

HTML for line-height method:

<div class="wrapper">
    <img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>

CSS for line-height method:

img {
    line-height: 300px;
}

1

votes

You could use JavaScript to calculate the center point and position it with either margin or top (with position:relative/absolute), but this isn't really clean.

I'm assuming you're talking about a splash page, so here is a simple example (although in other circumstances I do not recommend modifying the body tag as I have done):

<!doctype html>
<html>
    <head>
        <title>blah</title>
        <style type="text/css">
            html,body {margin:0;padding:0;width:100%;height:100%;}
            body {display:table;}
            p {display:table-cell;text-align:center;vertical-align:middle;}
        </style>
    </head>
    <body>
        <p>Hello World - This could have an image in it</p>
    </body>
</html>

The trick is in the CSS:

The item you wish to center both horizontally and vertically is displayed as a table cell: display:table-cell
The parent (container) of the item you wish to center is displayed as a table: display:table
Make sure the table display element is consuming the entire area which you would like to center against.
The item you wish to center must be told to align horizontally (text-align:center declaration) and vertically (vertical-align:middle declaration)
The text-align and vertical-align properties only work this special way because the element is displayed as a table-cell

1

votes

You don't say if the image size is known.

There are a couple of ways to do this, I favour some CSS like so on an image with id="centreme" (if the image is 200x200) and a wrapper for the entire page

div#contentwrapper {
    width:100%;
    height:100%;
    position:relative;
}
img#centreme {
    position: relative;
    width: 200px;   /* the image width */
    height: 200px;  /* the image height */
    top: 50%;
    left: 50%;
    margin-top: -100px;  /* half the image height */
    margin-left:-100px;  /* half the image width */
}

fiddle for you to play with http://jsfiddle.net/7PYzB/2/

Center Image Vertical and Horizontal

5 Answers

Fiddle