Center an image with CSS (horizontal and vertical)

Question

This is a basic question that i couldn't find answer to .

I would like to take a logo image, centre it exactly in the middle of the screen ,when keeping the image in its original size . Than right under that image(- 5px down), put a small text line, where i choose its font .

Everything is messed up when i am trying to do that , so i will put the basic ,and if you can help me achieve this simple goal, that would be great .

<html>
    <body>
        <img src="images/logoBlackBig.png" alt="W3Schools.com" >
    </body>
</html>

Do you want the image to be at full size and centered even if the window is smaller than the image, effectively cropping off the sides? — Trevin Avery, Oct 11 '14 at 16:24
hi , the image is always smaller than screen , its a logo .but lets say i want to proportionally change its size according to screens . — Curnelious, Oct 11 '14 at 16:26

Anonymous · Answer 1 · 2014-10-11T17:22:30.530

5

You could achieve this by using css transform and absolute position like this:

JSFiddle - DEMO

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
* {margin: 0; padding: 0;}
.div {
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid #000;
    text-align: center;
}
.img {
    vertical-align:middle;
}
.p {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #000;
    font-size: 24px;
}
</style>
</head>
<body>
    <div class="div">
        <img class="img" src="http://media.tumblr.com/tumblr_m6cfbeVrUy1qegis6o1_400.gif" alt="W3Schools.com">
        <p class="p">MY TEXT</p>
    </div>
</body>
</html>

edited Oct 11 '14 at 17:22

answered Oct 11 '14 at 16:33

Anonymous

9,582
2
21
39

thanks very much ,but again ,since i am a beginner ,how the ENTIRE html would look like with everything inside ? – Curnelious Oct 11 '14 at 16:35
@Curnelious You can add more content inside the `div` tag in my solution and that will centre it exactly in the middle of the screen - http://jsfiddle.net/nvk0qkm8/ – Anonymous Oct 11 '14 at 16:39
so what i do is just copy paste your code into the .html , the 2 parts of your code, and thats it? how can i add the text under that image? – Curnelious Oct 11 '14 at 16:43
i get it not centred ,i guess i am not writing it good, can't you just show me the entire file? how it should look like ? – Curnelious Oct 11 '14 at 16:45
thanks for the edit, its not good. the image is not centred, and there is html code appears on the page itself .... – Curnelious Oct 11 '14 at 16:53
1

+1 as always a rocking good answer – Christina Oct 11 '14 at 17:05
Thanks @Christina :) – Anonymous Oct 11 '14 at 17:07
@Curnelious Copy and paste the entire HTML code from my answer in a new .html file and then run... :) – Anonymous Oct 11 '14 at 17:12
THANKS, its now working but not good, i see the image not centred in safari, and the text is above the image . . . – Curnelious Oct 11 '14 at 17:14
also if i take another image,bigger, it will put it not centred and too big(not resizing it) – Curnelious Oct 11 '14 at 17:17
thanks a lot , the code of misterManSam works . . . – Curnelious Oct 11 '14 at 17:22
@Curnelious Try one more time in safari :) – Anonymous Oct 11 '14 at 17:23
1

@MaryMelody - I think he is using your fiddle which doesn't have `-webkit-transform: translate(-50%, -50%);`. Safari needs the prefixed version :) – misterManSam Oct 11 '14 at 17:33
1

@misterManSam Yeah! maybe you're right but I'm so glad he accepted your answer. :) – Anonymous Oct 11 '14 at 17:36

misterManSam · Accepted Answer · 2014-10-18T05:39:30.827

Improved - now with image re-sizing

Building Blocks

The image and text are wrapped in a div.
The div is centered thanks to the right combination of position: absolute, top, right, bottom, left and margin: auto.
The container will re-size to its max width and height with height: 100% and width: 100%
max-height: 100% and max-width: 100% ensures that the image width height ratio remains 1:1 when re-sizing.

IE 8 needs a fixed pixel height for the container.

Change max width and height to match the image.

Demo

* {
  margin: 0;
  padding: 0;
}
.centered {
  position: absolute;
  top: -4em;
  /* change top unit size to get desired vertical placement */
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%; /*IE 8 Needs px height */
  width: 100%;
  max-height: 300px;
  max-width: 300px;
  min-width: 100px;
  text-align: center;
}
.centered img {
  max-height: 100%;
  max-width: 100%;
  min-width: 100px;
}

<div class="centered">
  <img src="http://www.placehold.it/300" />
  <h1>Green Eggs and Ham</h1>
</div>

Center an image with CSS (horizontal and vertical)

2 Answers2

Improved - now with image re-sizing

Building Blocks

Demo

Linked