Estoy tratando de posicionarme en absoluto dentro del elemento secundario de mi hijo (o puede decir elemento nieto). El problema al que me enfrento no me permite hacer lo mismo, ya que en mi primer div estoy usando Flex. Consulte el código a continuación para comprender:

 <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>

Y ahora en mi estilo CSS:

 .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; }*

Imagen a continuación: