How do I centre an image both vertically and horizontally without setting it as a background?

Question

I want to set a circular image into the centre of the home page, with a single button overlaying this. There is no other content on the page, just an image and a button. As you can probably tell, we are extremely new to coding! We are using CSS and HTML on Dreamweaver.

There are so many answers about it on SO just search http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css and /questions/114543/how-to-center-a-div-in-a-div-horizontally — DaniP, Dec 17 '13 at 14:00
We don't have any at the moment, we just have no idea how to start with centreing the image. It is literally a blank page with one image! — Cufflinks, Dec 17 '13 at 14:01

score 1 · Answer 1 · answered Dec 17 '13 at 14:00

1

Set the CSS for the container div to:

#container {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

An image inside that div should be centered both horizontally and vertically.

answered Dec 17 '13 at 14:00

display-name-is-missing

4,424
5
28
41

score 1 · Accepted Answer · answered Dec 17 '13 at 14:10

OK, so let's say you have a couple of div elements with an img inside:

<div class="parent"><div class="img-container"><img src="http://placekitten.com/230/230" alt="kitten"></div></div>

You could set your CSS as follows:

.parent {
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.img-container {
    height: 500px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

See http://jsfiddle.net/NL2ZA/ for a demo. Obviously you'll want to edit the class names to say something that makes more sense in your project.

score 0 · Answer 3 · answered Dec 17 '13 at 14:00

You could do something like this. Change the image-id to whatever ID you have for that image, display it as block, make it a certain width, either in % or pixles, and margin 0 auto.

#image-id {
    display: block;
    width: 60%;
    margin: 0 auto;
}

DADE · Answer 4 · 2013-12-17T14:07:35.697

0

There's couple of techniques.

CSS Background - You don't need this, but still:

html {
width: 100%;
height: 100%;
background: url(logo.png) center center no-repeat;
}

CSS + Inline image:

img { 
position: absolute;
width: 400px; height: 400px;
left: 50%; margin-left: -20px; /* Half the width */
top: 50%; margin-top: -20px; /* Half the height */
}

Table:

html, body, #wrap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

#wrap td {
vertical-align: middle;
text-align: center;
}

<html>
<body>
<table id="wrapper">
<tr><td><img src="logo.png"></td></tr>
</table>
</body>
</html>

edited Dec 17 '13 at 14:07

answered Dec 17 '13 at 14:01

DADE

90
1
1
8

Isn't the correct selector for an image `img`? – display-name-is-missing Dec 17 '13 at 14:03
It is img, of course. Edited with more techniques. – DADE Dec 17 '13 at 14:08

score 0 · Answer 5 · answered Dec 17 '13 at 14:03

0

You can set the height and width from your image with pixels or % . You can also change the image position with margin-left/top/right/bottom. You can find a lot of information about html/css here: http://www.w3schools.com. Good luck!

answered Dec 17 '13 at 14:03

cwi93

37
1
7

score 0 · Answer 6 · answered Dec 17 '13 at 14:15

a very simple way of doing this is using css transforms. No need of extra HTML besides the image in my example:"

FIDDLE (webkit example)

http://jsfiddle.net/CNs68/

CSS

img {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
}

The good thing about this example is that it doesnt matter what the dimension of the image is, it will always be centered! Don't forget to add the other prefixes (such as moz).

How do I centre an image both vertically and horizontally without setting it as a background?

6 Answers6