centre a div containing other divs which is dependent to each other

Question

I am using a pure CSS Loader as a loading stuff in my project. Called whenever its loading the new page or opening for the first time.

HTML code for the loader

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</body>
</html>

CSS Code for the loader

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid rgb(0, 225, 255);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }

I want to place it horizontally and vertically center of the body but don't want to apply any CSS to the body because it will affect the other elements of my project. Now I have gone through some of the examples in stack overflow like

How to center an element horizontally and vertically?

And

Center a DIV horizontally and vertically

And 2-3 more examples but they didn't worked for me. Maybe because of the position type of the CSS class .lds-ripple its giving problem. Is there any way to place this loader horizontally or vertically center of the body without applying any css to the body.

score 1 · Accepted Answer · answered Jun 12 '18 at 10:56

You can simply change css of lds-ripple

.lds-ripple {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
  .lds-ripple div {
    position: absolute;
    border: 4px solid rgb(0, 225, 255);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }

<div class="lds-ripple">
        <div></div>
        <div></div>
    </div>

score 0 · Answer 2 · answered Jun 12 '18 at 10:55

Added

.lds-ripple {
   display: inline-block;
   position: relative;
   width: 64px;
   height: 64px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

 
body, html {
   height: 100%;
   margin: 0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  }
  .lds-ripple div {
position: absolute;
border: 4px solid rgb(0, 225, 255);
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
0% {
  top: 28px;
  left: 28px;
  width: 0;
  height: 0;
  opacity: 1;
}
100% {
  top: -1px;
  left: -1px;
  width: 58px;
  height: 58px;
  opacity: 0;
}
  }

 <div class="lds-ripple">
    <div></div>
    <div></div>
</div>

centre a div containing other divs which is dependent to each other

2 Answers2