How to center a spinner horizontally and vertically in page?

Question

I have a div block that simulates a small spinner, everything works fine however with the css configurations that I have it is positioned in the upper right wing, I tried to center it but when I see it from a mobile device it moves from place .. how could to center it without it changing position in devices with different sizes?

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

score 16 · Accepted Answer · edited Jul 06 '22 at 05:04

16

Since it is fixed, the top|left|right|bottom attributes are relative to the window. So a position in percentages, in this case 50% should do the trick.

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* half of the elements height */
  margin-right: -..px; /* half of the elements width */
}

Alternative, given by Utkanos in the comments

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */
  right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */
}

edited Jul 06 '22 at 05:04

nullptr

3,701
2
16
40

answered Mar 19 '18 at 14:31

GreyRoofPigeon

17,833
4
36
59

4

Or for absolute centering, use `calc()` on `left`, i.e. `calc(50% - (50px / 2))`, where 50px is the element's width. Likewise for `top`. – Mitya Mar 19 '18 at 14:32
1

@Utkanos 's solution didn't work for me, but the first one did. I'm using electron – Sheshank S. Aug 31 '19 at 06:27

Stickers · Answer 2 · 2018-03-20T15:41:06.160

If you prefer the spinner to cover the entire viewport:

.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 50px no-repeat;
}

<div class="spinner"></div>

If you want it to be only the size of the gif/svg:

.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

<div class="spinner"></div>

This is excellent, thank you – NicholasKyleHoffman Feb 01 '21 at 23:10 — NicholasKyleHoffman, Feb 01 '21 at 23:10

score 8 · Answer 3 · answered Mar 19 '18 at 14:45

Just try the transform and position top and left combination...

Note: Here I have used font-awesome just for demonstration

.spinner {
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>

score 5 · Answer 4 · answered Mar 19 '18 at 14:34

5

Try this to get center position on all size

.spinner{
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

answered Mar 19 '18 at 14:34

Iniamudhan

478
4
17

Great solution, works perfectly for Bootstrap and the way it animates spinners as opposed to the translate method which does not – Aaron Meese May 17 '22 at 12:47

How to center a spinner horizontally and vertically in page?

4 Answers4