Putting Image Always in Center Page

putting image always in center page

For most browsers, you can use position:fixed

 img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.

Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/

Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html

Force an image to ALWAYS stay at the middle of a div

Using this centering trick should give you what you want:

img {
  position:relative; (or absolute, it depends on your needs)
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

This keeps the image centered no matter the size of the container it is in. It doesn't resize the image though. Based on that pic you out it seems like you didn't want that.

Keep an Image Always Centered Regardless of Browser Size

Try this: http://jsfiddle.net/9tRZG/1/

#wrapper {
    max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
    margin: 0 auto;
}
#wrapper img{
    width:100%;       /* the image will now scale down as its parent gets smaller */
}
​

To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/

#wrapper {
    max-width: 600px; /* so this will scale down when the screen resizes */
    margin: 0 auto;
    overflow:hidden;  /* so that the children are cropped */
    border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}

#wrapper .slides_container{
    width:600px;            /* static width here */
    position:relative;      /* so we can position it relative to its parent */
    left:50%;               /* centering the box */
    margin-left:-300px;     /* centering the box */
}
#wrapper img{
    display:block;          /* this allows us to use the centering margin trick */
    margin: 2px auto;       /* the top/bottom margin isn't necessary here, but the left/right is */
}

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

Making image align center of screen in html

Instead of Table, You can achieve the same with div and img

Working Demo

HTML

<div><img src="http://placehold.it/350x150"></div>

CSS

html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

div {
    position:relative;
    height: 100%;
    width:100%;
}

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

how to put image in center of html page?

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.

Display the image in the center of the page

Found this: How to Center an Image Perfectly in CSS, might help.

#img
{
    position:absolute;
    width:592px; /*image width */
    height:512px; /*image height */
    left:50%; 
    top:50%;
    margin-left:-296px; /*image width/2 */
    margin-top:-256px; /*image height/2 */
}

How do I center my image gallery on a page?

I would just put text-align: center on .grid, knowing that it will trickle down

Or you can use flexbox which will give you an easier time overall:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

---

Related Topics