Cannot make div center using CSS3

Question

This is probably a very simple fix but I have a spinner which I cannot get to center in the page whenever I shows on the page for some reason

My CSS is here:

#spinner {
    height: 55px;
    width: 55px;
    display: inline-block;
    position: absolute;
    margin: 0 auto;
    z-index: 1;
    transform: translate(50%, 50%);
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
}

Simple HTML Mark-up

<div id="spinner">
  <img src="http://via.placeholder.com/50x50">
</div>

You can see the JS Fiddle here

#spinner {
    height: 55px;
    width: 55px;
    display: inline-block;
    position: absolute;
    margin: 0 auto;
    z-index: 1;
    transform: translate(50%, 50%);
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    -moz-transform: translate(50%, 50%);
}

<div id="spinner">
  <img src="http://via.placeholder.com/50x50">
</div>

score 0 · Accepted Answer · answered Mar 09 '18 at 10:41

You are using wrong values for transform....use (-50%,-50%) and also use left:50% and top:50%

Stack Snippet

#spinner {
  height: 55px;
  width: 55px;
  display: inline-block;
  position: absolute;
  margin: 0 auto;
  z-index: 1;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

<div id="spinner">
  <img src="http://via.placeholder.com/50x50">
</div>

Cannot make div center using CSS3

1 Answers1