What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses.

.img-loader{
  text-align: center;
  width: 50px;
  display: block;
  margin: 0 auto;
}

.wrapper{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 135, 0, 0.1);
  position: absolute;
  top: 0;

}
<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="wrapper">
  <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" class="img-loader">  
</div>

htmlcss

Answer №1

Revise your css code for img as follows:

.img-loader{
    text-align: center;
    width: 50px;
    display: block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}


.img-loader{
  text-align: center;
  width: 50px;
  display: block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

.wrapper{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 135, 0, 0.1);
  position: absolute;
  top: 0;

}
<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="wrapper">
  <img src="https://pixabay.com/static/uploads/photo/2015/08/31/15/29/person-915604_640.jpg" class="img-loader">  
</div>

Answer №2

Here is a simple way to achieve this: Check out the demo

.img-loader {      
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}
.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

For the HTML:

<div class="wrapper">
    <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" alt="" class="img-loader" />
</div>

Answer №3

Instead of relying on the top and position attributes, consider utilizing this alternative approach:

.image-loader{ 
    width:50px;
    display: inline-block;
    margin:0 auto; 
}

By implementing this code, the image will remain center-aligned.

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

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

javascriptcss

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

javascriptjqueryhtmlcssslide

`When utilizing $routeParams, the CSS fails to load`

Whenever I use parameters in ngRoute and go directly to the URL (without clicking a link on the site), the CSS fails to load. All my routes are functioning properly except for /chef/:id. I utilized yeoman's angular generator, and I am running everythi ...

javascriptcssangularjsangularjs-ng-route

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

What is causing this image to be off-center both vertically and horizontally on the table?

Currently, I have a small 20px by 20px image displaying in the top left corner of an empty table: <table width="100px"> <tr> <td width='100%' align='center' valign='center'> <img i ...

htmlhtml-tablealignment

Tips for deleting part of the URL at the end of all hyperlinks on a webpage

I have a large number of links on the same page that I would like to clean up by removing everything from specific characters until the end of the URL. Currently, there are too many links like this scattered throughout my page. The string "$amp;rs" or "&a ...

phphtmlregexurl

What is causing the left scroll to not work with negative values?

My design features three blocks stacked on top of each other with an additional block at the bottom below the middle. Left <--------> Middle<---------->Right -----------------Bottom------------------ I have a couple of queries. Why is scr ...

jqueryhtmlcssscrollclick

Can a function be embedded within a React render method that includes a conditional statement to update the state using setState()?

My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...

javascripthtmlreactjsjsx

Restrict the child's height to the remaining space within the parent container

I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...

htmlcss

Achieving perfect alignment for a div that can adapt to different sizes and

Struggling with my CSS skills, I have spent countless hours trying to center a fixed/dynamic size div. The setup involves multiple images within a 100x100 size frame. Upon clicking on an image (thanks to jQuery), #fade is triggered to reveal a window showc ...

jquerycss

Steps for transferring data between two components

I'm looking for a way to transfer an object's id from one component to another. <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let user"> ...

htmlangulartypescriptangular-material

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

javascripthtmlcssgoogle-visualization

Add an arrow or triangle at the tip of the line

I am currently working on recreating the design of lines with an arrow or triangle at the end side of an Input form. The inspiration for this comes from an old flash application that is now being converted to HTML5: So far, I have managed to create the li ...

csshtml

After the automation is finished, I am interested in outputting the IMDB rating of a movie or series to the terminal

I prefer using Google search to find the element because I find it easier to navigate compared to IMDB. import selenium.webdriver as webdriver print("This script is designed to retrieve the IMDb rating of a movie or TV series!!!") def get_results(search_ ...

htmlcssseleniumwebweb-crawler

Are you looking for methods to alter the elements of a webpage prior to viewing it?

I have created a page with the intention of using it as a tool, but I am facing some challenges due to my limited experience in this field. As a newcomer, I am struggling to achieve certain goals: - My objective is to modify the values of an element on a p ...

javascripthtmlcssdombootstrap-4

Ways to retrieve the user's IP address and provide the information in JSON format

Although I am not an expert in PHP, I specialize in developing Android apps. One of the challenges I face is extracting the user's IP address from a specific URL . This URL provides various information when accessed, but my main requirement is to retr ...

phpandroidhtmljsonparsing

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

What is the best way to display a variable (string/int) from a PHP file onto an HTML file?

I've searched online multiple times for a solution, but most of the results I found only show how to echo HTML code from a PHP file by changing the file extension to .php. However, my goal is to echo a variable from a PHP file and display it in an HTM ...

phphtml