Centering an image with media queries when in mobile mode

To center an image vertically and horizontally on a web page using CSS, you can use the following CSS code:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust this value as needed */
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

In this example, we create a container element with the class name "container" that will hold the image. The container is styled as a flex container using display: flex, which allows us to use flexbox properties for alignment.

The justify-content: center property horizontally centers the image within the container, and align-items: center vertically centers the image. The height: 100vh sets the height of the container to 100% of the viewport height, but you can adjust this value as needed.

The img selector inside the container sets max-width: 100% and max-height: 100% to ensure the image doesn't exceed the container's dimensions.

To use this CSS, you need to wrap your image with a container element like this:

<div class="container">
  <img src="your-image.jpg" alt="Your Image">
</div>

Replace "your-image.jpg" with the actual path or URL of your image, and "Your Image" with an appropriate alt text for accessibility purposes.

With this setup, the image will be centered both vertically and horizontally on the page.