Member Avatar for MrScruff

This is doing my nut in as I'm sure it must be really simple. All I want to do is display an image in the center of my webpage vertically and horizontally:

What do I need to do and thanks for any help!

  • 5 Contributors
  • 7 Replies
  • 225 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Brief, practical follow-up for : ’s absolute-position idea will work in narrow cases and is right that simple top/left offsets break across viewports. For reliably centering an image both horizontally and vertically use a layout method that respects the viewport or the parent container — today the easiest is Flexbox; a transform-based absolute centering is a compact fallback. Below are two small, drop-in examples and a few troubleshooting notes.

html, body { height:100%; margin:0; }
body {
  min-height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.center { max-width: 90%; height: auto; display: block; }

If you need older-browser compatibility or prefer a positioning approach, wrap the image in a full-height container and center with transform:

.container { position: relative; height: 100vh; }
img.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
  display: block;
}

Troubleshooting tips: if the page will contain more content than one viewport, don’t overlap content — center inside a specific container rather than forcing full-viewport absolute positioning. Reserve intrinsic image dimensions (or use aspect-ratio) to avoid layout shifts as images load. If the image is decorative, consider a full-bleed background with background-position: center center and background-size: contain/cover instead of an <img> element. For the earlier table/layout discussion, prefer semantic markup with CSS for maintainability and accessibility; use table cells only for tabular data. Test on multiple viewports to confirm the visual result.

Recommended Answers

All 7 Replies

Member Avatar for mikeandike22

Im not sure what your asking. How are you going to display the same image two different ways. Or do you mean you want to position it in the center of the page.
you most likely want to use css for this and absolute position the image.

img.center {
position:absolute;
top:25%; /*change to fit*/
left:45%;/*change for page*/
}
 <!--Then your html should be-->
<img class="center" src="MFTP.jpg" alt="" />

I would recommend not using tables for your webpage as well.

Member Avatar for FC Jamison

That won't center it in the browser window, though...will it?

I mean, it will work for a specific resolution on a specific browser, but not across all platforms.

Member Avatar for mikeandike22

yea I know but the more content you add the longer the page is gonna get anyways. So it can never truly be center w/o javascript im assuming or possibly you could use the vertical-align property in css and set it to middle.

Member Avatar for Killer_Typo

I would recommend not using tables for your webpage as well.

i hate to dig up old threads but i was wondering why you dont recommend tables?

Member Avatar for tgreer

Let's not start that debate again. It's been covered here, there, and everywhere already.

Member Avatar for Killer_Typo

Let's not start that debate again. It's been covered here, there, and everywhere already.

:-| i wasnt looking for a debate, i was just looking for a different way to try and design my pages. im always open to different methods, especially if i see an increase in usability and decrease in overall load times and all that jazz.

Member Avatar for tgreer

Cool. The main debate is "tables" vs. XHTML with divs and CSS. I just didn't want that hashed out again, as it gets political.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.