What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px.

<div class="center" style="">
  <div class="uil-default-css" style="width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;zoom:0.5;-moz-transform:scale(0.5);">
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    ... (additional code omitted for brevity)
  </div>
</div>

The CSS for centering is as follows:

text-align: center;
display: table-cell;
vertical-align: middle;
htmlcss

Answer №1

Is this the solution you are seeking?

I managed to center it perfectly using the transform:translate(-50%,-50%); property.

Don't forget to include position:relative if you opt for absolute positioning. To ensure accurate centering, be sure to specify a height for the parent element in your case.

If not, the spinner will struggle to determine the reference point for its centering.

Alternatively, consider employing the loader as a full-page loader,

In such a scenario, you can employ position:fixed and center it in the same manner mentioned earlier, removing the necessity of providing position:relative to the parent element.

.uil-default-css {
      transform: translate(-50%, -50%) scale(0.5);
}

.center {
  position: relative;
  height: 100vh;
}
<div class="center" style="">
  <div class="uil-default-css" style="width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;">
    <div style="top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;"></div>
    // continue with remaining code...
  </div>
</div>

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

Preserving distance between absolute elements

I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfor ...

jquerycssanimation

Utilizing inappropriate HTML attributes

Imagine I have a different layout: <div> <p>My Laptop </p> <p>My Phone </p> </div> With jQuery, if one of these items is clicked, I want to display its value. Would it be acceptable to store extra information in an att ...

jqueryhtml

Place the div at the bottom of the page or viewport if it is bigger

Is there a way to ensure that a div with a background remains at the bottom of the page, regardless of whether the content on the page pushes it down or not? Currently, I am using the following code: #bottomBar { position: absolute; bottom: 0; } ...

jqueryhtmlcss

The modal popup will appear in the center of the screen when the scrollbar is positioned at the top

I have a modal popup that is not consistently displayed in the center of the screen, regardless of the scrollbar position. I always want it to render at the center so the user doesn't need to scroll to see it. Below is the code I am currently using: ...

javascriptphpjqueryhtmlcss

Exploring Instagram post layouts: A comparison of card-columns in Chrome versus other web browsers

Utilizing Bootstrap 4 card-columns for showcasing Instagram posts on a website has showcased some discrepancies across different browsers. Notably, Chrome seems to be losing the second column as compared to other browsers. Screenshots highlighting these di ...

htmltwitter-bootstrapgoogle-chromebootstrap-4

Arrange the select default option using AngularJS as the first option

I've been working on a project using Angular where I fetch data from a JSON file and push it to an array object. This data is then displayed in the options of a select element. My issue is: The default option with selection appears first, but I only ...

javascriptangularjshtml

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

Customizing the appearance of an input button in Internet Explorer 8

I've been trying to style my file input section using a method similar to the one outlined in this article: . However, I'm encountering issues specifically with compatibility in IE8; all I can see is the corner of an oversized button. Here' ...

cssinternet-explorer-8opacity

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

On my website, I have a page where clients must view an advertisement for 20 seconds. The website is displayed in an iframe with a countdown timer above it. I've set it up so that the timer stops when the window loses focus to ensure the client is ac ...

javascripthtmliframetimercountdown

Align the text characters vertically within a word or sentence

I currently have a logo that consists of lines and text. I would like to create a similar version using CSS for my website. https://i.sstatic.net/vxS8Z.png My goal is to have the letters "T - S o N" appear in one line with the letter "o" positioned verti ...

htmlcsswordpressalignment

What is the best way to grab the initial section of a website's text while using a WKWebView?

When working with a WKWebView, retrieving the webpage's title is simple using webView.title. However, obtaining the first paragraph of the webpage's content poses a challenge with no straightforward solution. Any tips or suggestions on how to ac ...

htmliosuiwebviewwkwebview

Guidance on marking a menu item as selected when choosing its sub-item

I've been tasked with creating a menu and I want to ensure that the menu item stays selected when its subchild is selected. Below is a snippet from my CSS file: #wrapper { width:100%; height:500px; } h2 { color:#787878; } // more ...

cssstylesheet

Notification window when the page is being loaded

My goal is to have a module or alert box display when my website is opened, and then disappear after 5 minutes. To see an example of what I'm looking for, take a look at this website: On that website, there is a facebook.com box that automatically d ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

javascripthtmlcsscodepen

How can you make the jQuery popup bar hidden by default?

Recently, I came across a tutorial on creating a popup bar similar to the one you see at the top of many websites. Interested in learning how it's done, I followed this tutorial: Being new to jQuery, I had a question in mind - is it possible to have ...

jqueryhtmlpopuphide

What is the best way to flip the direction of the text input for a Calculator?

I am currently working on creating a basic calculator from scratch using HTML, CSS, and JavaScript. I have been trying to figure out how to align the numbers to the right side of the input element. Can anyone provide me with guidance on how to achieve thi ...

javascripthtmlcss

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

I have managed to update the Immutable and Primitive Data-Types in JS. Now, the question arises - are these truly Primitives or are the concepts in

In JavaScript, there are 4 primitive data types that store values directly: String, Number, Boolean, and Symbol. I am excluding undefined and null from this list as they are special data types with unique characteristics. One key feature of primitives is ...

javascripthtml

Unable to adjust font weight as intended

I'm encountering an issue with getting the lighter font weights to display correctly. Despite having all the necessary font weights installed on my computer, it seems that many fonts do not support the lighter options. What could be causing this incon ...

htmlcssfonts

Mistake while defining a global variable within an HTML file and utilizing it

In my HTML document, I have set a global variable like this: <script type="text/javascript"> var total; </script> However, when I try to use this variable, I encounter an error stating that it cannot be used in this context. To resolve this ...

htmlasp.net-mvc-4