I am trying to position to absolute inside my Child's child element ( or you may say grandchild element). Problem I am facing it doesnot let me to do as, as in my first div I am using Flex.Please see the code below to understand:

<template>
  <div>
    <div class="markar-items">
      <!-- parent div -->
      <div class="marker-circle" :class="someMoreClass" @click="onClick">
        <!-- child div -->
        <div v-if="text" class="marker-text">{{ text }}</div>
        <div v-if="!text" class="marker-no-text">{{show  other icons}}</div>
      </div>
      <div class="pin"></div>
      <div class="pin-circle"></div>
    </div>
  </div>
</template>

And now in my CSS style:

.markar-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.marker-circle {
  position: "relative";
  background: green;
  width: 40px;
  height: 40px;
  border: 3px solid black;
  border-radius: 50%;
  cursor: pointer;
  background-color: red;
}

.marker-text {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.8em 1.2em;
  color: white;
  background-color: darkcyan;
  font-size: 14px;
  font-weight: bold;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
   
}

.marker-no-text {
  margin: 5px;
}

But if I use this two line of css in my marker-text, then it works, 
Why is that and nor working with position relative and absolute :

*.marker-text {
   text-align: center;
   margin-top: 8px;
}*

Image below: