Member Avatar for turpentyne

I've got a bit of css that is centering my content vertically and horizontally in web browsers, but the horizontal centering disappears when viewed on a samsung tablet, and sits flush left.

here's what I've got so far:

Code:

#content {
    display: block; 
    height: 100%;
    position:absolute;
    width:100%;
}

.container { 
    width:974px; 
    height:530px; 
    margin:0px auto; 
    border:0px solid #000; 
    position:relative; 
    top: 50%;
    margin-top: -265px;

}
  • 2 Contributors
  • 4 Replies
  • 119 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by turpentyne

Dani AI

Generated

A few targeted checks and two reliable fixes to try — based on ’s description and ’s suggestion to change the parent positioning.

First checklist (quick, high-impact):

  • Make sure a mobile viewport meta tag is present, e.g. <meta name="viewport" content="width=device-width, initial-scale=1">. Mobile browsers will otherwise present a different layout viewport and centering can appear broken. (See MDN on the viewport meta tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag)
  • Temporarily add visible outlines to the parent and child so you can see their computed boxes on the tablet (outline:1px solid #f00;). This helps confirm which box is actually filling the screen.
  • Verify there are no unintended transforms, overflow rules, or fixed widths on ancestor elements that would change the containing block.

Two robust centering alternatives (cross-browser friendly):

Use transform for exact centering (works well for fixed or known-size blocks):

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
}

Use flexbox for responsive layouts (recommended when the child should shrink on small screens):

.viewport {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Notes and debugging workflow:

  • Try each approach after adding the viewport meta. If one works on desktop but not on the tablet, use remote debugging (Chrome DevTools remote debugging) to inspect computed styles on the device: https://developer.chrome.com/docs/devtools/remote-debugging/
  • If you must keep the current method, test setting explicit left and right constraints on the containing block or switch the parent off absolute positioning temporarily to see if the behavior changes.

For cross-device consistency, prefer transform or flexbox over negative margin tricks; they avoid brittle calculations and are more reliable across mobile browsers (see MDN on transform: https://developer.mozilla.org/en-US/docs/Web/CSS/transform).

Recommended Answers

All 4 Replies

Member Avatar for EvolutionFallen

I'm not well-versed in mobile dev -- Is there any reason for the absolute positioning on #content?

Member Avatar for turpentyne

I put that in to get the content vertically centered, I believe. If I take it out, the content is flush to the top, and on tablets, there are quite a few wierd screw-ups that appear.

Member Avatar for EvolutionFallen

I would think the vertical centering would be accomplished by the relative position along with the top and margin-top properties on .container.
What if on #content you set:

position: relative;
top: 0;

See if that might help?
If that doesn't do it, can you share your HTML, as well as which android OS and browser you're testing?

Member Avatar for turpentyne

unfortunately, I get the same result. Vertically, I things are working fine in all browsers/platforms. It's just the horizontal positioning that breaks down.

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.