17190

Centering an image on screen using CSS - Random Screen/Image dimensions

I have to create a web page that for the purposes of this question is a single image centered both vertically and horizontally in the center of the screen. It has the following requirements:

    <li>The screen size of the client is unknown (mobile)</li> <li>The image is user-defined and therefore is of unknown dimensions</li> <li>The image must be perfectly centered both vertically and horizontally on all devices</li> <li>The image centering must persist through a screen rotation (i.e. from portrait to landscape)</li> </ul>

    Being a bit of a CSS newb, I went and created this the only way I knew how, using javascript to position the content: http://jsfiddle.net/error454/8YL9a/

    I'm looking for a solution that functions identically to my solution but uses CSS instead of hard equations.

    Answer1:

    display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center;

    CSS3 property, bad support : webkit, mozilla. Only way to do it with clean markup and CSS without JS.

    edit 1 : http://jsfiddle.net/t8qtn/6/

    edit 2 : for future proofing, the prefixless version is

    display:box; box-orient:horizontal; box-pack:center; box-align:center;

    Answer2:

    This is a nice article on centering: http://www.w3.org/Style/Examples/007/center.en.html

    It should be something like:

    .vcenter { display:table-cell; vertical-align:middle; } .hcenter { display:block; margin-left:auto; margin-right:auto; }

    And then apply both classes to your image:

    <img class="vcenter hcenter" src="..."/>

    Update: you could simply use a table like here http://www.sorinvasilescu.ro/

Recommend

  • searchBar from UISearchController not showing correctly on split view on iPad
  • Distribute images evenly to columns in gallery
  • statusbar frame sticks to portrait orientation and occludes window.view
  • UIActionSheet orientation
  • Cookie multiple values
  • How can I rotate a UIViewController to its supported interface orientation when navigating to it?
  • Bit not operation in PHP(or any other language probably)
  • How to get phone heading for augmented reality?
  • TimePickerDialog widget in landscape mode (PreferenceScreen)
  • How to hide the cursor in windows when dragging and dropping (possibly in python, or another languag
  • Git: failed to read object … Invalid argument
  • Force iPad app to launch in portrait when landscape is supported
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • cell spacing in div table
  • how does System.Web.HttpRequest::PathInfo work?
  • Not able to aggregate on nested fields in elasticsearch
  • Blackberry - Custom EditField Cursor
  • Allowing both email and username for authentication
  • How to clear text inside text field when radio button is select
  • Body moving without any force applied? (Box2d)
  • Get one-time binding to work for ng-if
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • HTML download movie download link
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Updating server-side rendering client-side
  • Incrementing object id automatically JS constructor (static method and variable)
  • How do you troubleshoot character encoding problems?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Android Google Maps API OnLocationChanged only called once
  • Turn off referential integrity in Derby? is it possible?
  • unknown Exception android
  • JaxB to read class hierarchy
  • Django query for large number of relationships