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

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

Navigate through an image by panning or scrolling within a div container

I have a container div with an image inside. <div id="container"> <img id="image" src ....> </div> I also have a function that retrieves the image by its ID and applies zoom using styles like this: image.style.transform = `scale(${v ...

cssimagezooming

Managing various choices in a Select menu using a single submit button

My method of using mysql to insert data into dropdown menus is not working as expected. Each dropdown menu has a unique name assigned from the database query $stmt. The content for each dropdown menu is retrieved through another query, $stmt2. My goal i ...

phphtmlmysql

The ng-model feature is unable to properly save data within a nested ng-repeat function for a 2-dimensional array

I'm currently working with a nested ng-repeat on a 2d array and have added ng-model to the third ng-repeat. However, I am encountering an issue where my ng-model is not properly storing the data within the object. JavaScript Code emrService .getDat ...

htmlangularjsmultidimensional-arrayangularjs-ng-repeatangular-ngmodel

Issue with submitting form on PHP page

I need some help with my signup form: <h2>Signup</h2> <form action="actions.php"> Email:<br> <input type="text" name="email"> <br> Password:<br> &l ...

phphtml

Execute AJAX request for two individual buttons

I have a scenario where I want to use two buttons to open separate PHP pages, but I would like to trigger both buttons with a single function. The AJAX function should then determine which button was clicked and open the corresponding PHP page - for exam ...

javascriptphphtmljqueryajax

Dynamic Display Picture Banner - Adjustable Layout

My home page features a full screen image header that I'm working to make responsive. The width of the image is being cut off on various screen sizes. I've attempted adjusting the height and width settings, but I want the image itself to resize ...

csswordpressresponsive

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

How to center multiple divs in a row using HTML and CSS

I've been attempting to achieve a pretty basic task, but unfortunately my efforts have fallen short thus far. I have an image and a title that need to be centered within their parent div element. However, I'm struggling to find the proper way to ...

htmlcss

Tips for combining dvloading and required functionalities on the submit button

My form has 2 fields that must be filled out, and I used the required attribute to enforce this rule. Enter A:<input type="text" name="a" required><br> Enter B:<input type="text" name="b" required><br> <button type="submit" cl ...

javascriptjqueryhtmlforms

What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence: <ol> <li>Products</li> <li class="active">Customer</li> <li>Payment</li> </ol> On desktop view, it appears a ...

htmlcss

Utilizing the JSON File in Your HTML Webpage: A Comprehensive Guide

I'm currently trying to integrate the following JSON file into my HTML page. <html> <head> <title> testing get</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> ...

javascripthtmljsonajax

Experiencing issues with ngx-masonry functionality in Angular application, resulting in images appearing clustered and overlapping

Working on a layout design in Angular 9 and utilizing the ngx-masonry package (https://www.npmjs.com/package/ngx-masonry) to achieve a specific grid structure. Here’s a snippet of my code: <div class="container pt-5"> <ngx-masonry ...

cssangulargridmasonryangular-masonry

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

Trouble with updating data in Angular 8 table

In Angular 8, I have created a table using angular material and AWS Lambda as the backend. The table includes a multi-select dropdown where users can choose values and click on a "Generate" button to add a new row with a timestamp and selected values displ ...

htmlangulartypescriptangular8

Is it possible to dynamically alter CSS using PHP?

Here's a little query on my mind. Is it possible to dynamically alter the content of a CSS style using PHP in this manner? <?php header("Content-type: text/css; charset: UTF-8"); $color = "red;"; ?> header { color:<?php print $co ...

phpcss

The CSS :first-child selector appears to be malfunctioning with the majority of elements

Having some difficulty with the :first-child selector. It just won't cooperate in my code. The goal is to execute a simple transform on two elements using the :first-child, but it's failing in multiple instances. Let me explain: First scenario: ...

jqueryhtmlcss

Show content to the right side of the division element

I would like to display the bold text up here, and this is my code: img{ margin-left:10px; } html <div id="wrap"> <img src="bg.jpg" /> <b class="name">WaqasTahir</b> </div> ...

htmlcss

Is there a way to automatically reset a datepicker using the on.change function?

I've attempted various methods to clear/reset the value for a datepicker using the on.(change) function, but have been unsuccessful. The Air Datepicker plugin is being used in conjunction with Bootstrap 4. HTML <select title="-- NODE --" id="node ...

jqueryhtmldatepicker

What is a PHP self-generating variable?

Is it possible to use a form variable as its own URL? It may be difficult to explain, but here's an example: matchmaking.php: $search_summoner = $_POST['search_summoner']; echo '<form method="post" action="matchmaking.php?searc ...

phphtmlforms