How to center a full-screen image using CSS with maximum height

As I work on creating a stylish image viewer resembling a gallery, I'm determined to position the image at the center and middle of the page.

If the image is smaller than 100% of the page, achieving this alignment becomes as easy as using table and table-row. However, things get trickier when dealing with images that exceed this size. In such cases, my go-to approach involves utilizingtext-align: center and max-height: 100%.

To see how I implement this technique in action, check out my code here: https://jsfiddle.net/rtv393z7/

<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
  <div style="width: 100%; height: 100%; text-align: center;">
    <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
  </div>
</div>

The challenge lies in getting this setup to function flawlessly in both scenarios. Any suggestions?

cssimagealignmentvertical-alignment

Answer №1

If you want to center content using flexbox, you can do it like so:

.flex-content{
  display: flex;
  align-items: center;
  justify-content: center;
}
<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
  <div class="flex-content" style="width: 100%; height: 100%; text-align: center;">
    <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
  </div>
</div>

Check out a working example on JSFiddle here

Alternatively, you can achieve centering using position: absolute and transform like this:

.center-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
    <div  class="center-content"  style="width: 100%; text-align: center;">
        <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
    </div>
</div>

I have removed the height: 100% inline style from .center-content.

Here is the JSFiddle for this alternative method

The first method may not work in Firefox as expected, contrary to its behavior in Chrome.

To make it work cross-browser, I made some adjustments as follows:

.center-content {
    position: relative;    
}

img{    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6);">
    <div  class="center-content"  style="width: 100%; height: 100%;">
        <img style="max-height: 100%; max-width: 100%; box-sizing: border-box; padding: 30px;" src="http://i.imgur.com/uRGZ0EE.jpg">
    </div>
</div>

You can view the adjusted version on JSFiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

I am looking for a solution to implement form validation in PHP. The form has 3 fields: user, id, and email. When a user enters their name or id in the respective input fields, I want to check if the entered value matches any of the values in the PHP arra ...

phpjquerycssinput

Padding issue observed at the lower part of the table cell in white color

Take a look at this JSFiddle: http://jsfiddle.net/nMbb4/1/ Here is the HTML code: <table> <tr> <td> 1 </td> </tr> <tr> <td> <div></div> ...

htmlcsspaddingcss-tablescellpadding

Drop-down and autocomplete feature in Material UI design framework

Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: https://i.sstatic.net/n7pj8.png Struggling to get them aligned on the same row. This is the code snippet of my component: const us ...

cssreactjsmaterial-ui

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

`Carousel nested within tabbed interface`

I am currently facing an issue with my website's tabs and carousels. I have 4 tabs, each containing a carousel, but only the carousel in the first tab seems to be working properly. When I activate the second tab, all the carousel divs collapse. For r ...

javascriptjqueryhtmlcsstwitter-bootstrap

Choosing jQuery elements based on multiple criteria

My attempt at a seemingly simple task is proving to be quite confusing and isn't functioning as expected... The goal is clear - upon document load using $(document).ready(), I want to target all input elements with the attribute type="text" and apply ...

javascriptjqueryasp.nethtmlcss

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap

The scaling transformation is not accurate for uneven pixel widths

I'm attempting to resize a div while keeping the inner element in the same position and at the same size. To achieve this, I am using transform: scale(value) on the wrapper and transform: scale(1/value) on the inside div. The issue arises when the in ...

htmlcsscss-transformsscaletransform

Is it possible to achieve a seamless hover effect on a website's navigation bar, similar to Tumblr's, without using JavaScript?

When hovering over the navigation bar links like Text, Photo, Quote on the Tumblr dashboard, an interesting effect occurs where the icon subtly rises about 5-10 pixels and then smoothly descends back to its original position, almost as if it is animated. ...

csshtmlanimation

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

cssalignment

Issue with SALON theme causing logo to not display on Wordpress site

It's puzzling why the logo image I uploaded to the WP theme isn't showing up on the front-end. I've reached out to the theme developers multiple times, but it's been two months without a response, and my client, as well as myself, are ...

csswordpressthemes

Snap to the top of the table with merged columns using scroll feature

I am currently attempting to create a table with horizontal scrolling and snapping behavior for the yellow header columns that span multiple columns. These headers should snap to the end of the red column, while always maintaining alignment at the beginnin ...

htmlcssscroll-snap

Highlighting the parent menu item when hovering over a dropdown menu option to show it is active

I have been searching for a solution to my issue, but none of the suggestions seem to work for me. The problem I am facing is with a menu dropdown in the What's On section of a website I am currently developing. Specifically, I am trying to keep the ...

csshover

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

javascriptjqueryhtmlcssajax

Ways to prevent scrolling on mobile web browsers?

I am currently facing an issue with disabling scrolling on a webpage when a user opens a popup, while still allowing them to scroll within the popup itself. The popup element is defined by the following attributes: #popup { display: none; width: ...

javascriptjqueryhtmlcssmobile

Switch Cursor on Movable Area in Electron

Working on a project in Electron and having some trouble with a frameless window. I have designated certain top areas as draggable using -webkit-app-region: drag, but the cursor will not change as expected. Although this code snippet won't make the e ...

javascriptcsselectronelectron-builder

Aligning a row with space between columns

I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...

jqueryhtmlcsstwitter-bootstrapwrapper

Organize elements with precision using html and css properties

I am struggling to get the buttons on the card to align properly. I have set a minimum height to ensure they are consistent in size regardless of content, but the alignment of the buttons is off. Take a look at the photo attached for reference - I want the ...

htmlcssbootstrap-5

Step-by-step tutorial: Uploading an image from Vue.js using axios to phpMyAdmin

Within my owner.vue file, the administrators have the privilege to input an owner's information into a table named "owner". Currently, the name of the owner can be successfully added to the database, however, the image column remains empty. My intenti ...

phpimagevue.jsaxios

Scrollable horizontal card list using Bootstrap

Looking to design a unique layout featuring a horizontal list of cards where 3 cards are displayed simultaneously, with the ability to horizontally scroll through the rest, like this: https://i.sstatic.net/KgX27.png While achieving this using CSS is stra ...

csstwitter-bootstrapbootstrap-4bootstrap-5