Aligning a picture at the center of the screen with CSS - Various screen and image sizes

Question

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements:

The client's screen size is unknown (mobile)
The image will be user-defined with unknown dimensions
The image must remain perfectly centered regardless of device or screen orientation changes
The centering should persist even when the screen rotates (e.g. from portrait to landscape)

As someone new to CSS, I initially used javascript to position the content in this way: http://jsfiddle.net/error454/8YL9a/

I am seeking a CSS-based solution that achieves the same results without relying on complex equations.

javascript css enyo

Answer 1

Answer №1

display:flex;
flex-direction:row;
justify-content:center;
align-items:center;

This CSS3 property may not be well supported by webkit and mozilla browsers, but it's the best way to achieve this layout without relying on JavaScript.

Check out this example: http://jsfiddle.net/t8qtn/6/

To future-proof your code, you can use the prefixless version:

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

Answer 2

display:flex;
flex-direction:row;
justify-content:center;
align-items:center;

This CSS3 property may not be well supported by webkit and mozilla browsers, but it's the best way to achieve this layout without relying on JavaScript.

Check out this example: http://jsfiddle.net/t8qtn/6/

To future-proof your code, you can use the prefixless version:

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

Answer 3

Answer №2

This article provides helpful tips on how to center elements: http://www.w3.org/Style/Examples/007/center.en.html

One way to achieve centering is by using the following CSS classes:

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

Simply apply both classes to your desired image like this:

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

Alternatively, you can also utilize a table for centering as shown in this example:

Answer 4

This article provides helpful tips on how to center elements: http://www.w3.org/Style/Examples/007/center.en.html

One way to achieve centering is by using the following CSS classes:

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

Simply apply both classes to your desired image like this:

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

Alternatively, you can also utilize a table for centering as shown in this example:

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

Answer №1

Answer №2

Similar questions

What is the best way to create a full bleed background image that adjusts to different screen resolutions using CSS and JavaScript?

Unusual occurrence in Chrome when checking definitions: ReferenceError: x is not defined

The head.js feature similar to "Modernizr" does not recognize ms-edge

Exploring the capabilities of the Scripting.FileSystemObject within the Microsoft Edge browser

Utilizing inline javascript to dynamically update the selected option of a radio button

What are the differences between Sitecore Analytics and Adobe Analytics? How do they each utilize JavaScript

How to transform an array into a collection of objects using React

Encountered a discrepancy with npm dependencies during the update or installation process on a legacy project

Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

Could you provide me with some information regarding the relationship between screen resolution and screen size?

Retrieve text content using jQuery from two different classes

Guide on incorporating arrays into an array using JavaScript

Scaling Flexbox divs based on images dimensions

Retrieve the thousand separator for numbers using Angular in various languages

Is there a way to manually stop a file upload (stream) using a XMLHttpRequest on the server?

Utilize the $setValidity function within ng-repeat to validate input fields

Hide specific content while displaying a certain element

Is there a way in jqGrid to invoke a function once the subGridRowCollapsed operation finishes?

Modifying the attribute of an element inside an array

What is the best way to prevent a font awesome icon from appearing in a span during data loading