[Vuejs]-Can you center a child of a child in the parent component?

by

0👍

Using position: fixed and transform: translate(-50%, -50%) will centre your element in the middle of the page view port (window). Below a reduced example:

.parent {
  border: 1px solid black;
  text-align: center;
}
.child-one, .child-two {
  width: 80%;
  margin: 10% auto;
  padding: 25% 0%;
  background: #489FE2;
}

.loader-wrapper {
  background: #3d3;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader {
    animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="parent">
 parent
  <div class="child-one">
    child-one
  </div>
  <div class="child-two">
    child-two
    <div class="spinner loader-wrapper">
    spinner/loader-wrapper
      <div class="loader">loader</div>
     </div>
  </div>
</div>

Leave a comment