Center a div with absolute position and text in the center of the parent div

Question

Center a div with absolute position and text in the center of the parent div

Navigation

#1 by (4 votes)
#2 by (0 votes)

1

People are as follows I have a parent div and another div with an absolute positional text ... this text is aligned to the top and left of the parent div and I need to align to the center ... things like top: x% or left x% .. n work because the parent element is dynamic and responsive ... I need it to be right in the center .. I tried things like justify content and align items in the center but it did not work ... someone knows how ... follow the div code:

.textotoposobre{
    text-align: center;
    color: white;
    font-family: 'Open Sans';
    align-items: center;
    justify-content: center;
    top: 30%;
    left: 28%;
}

css posicionamento

asked by anonymous 20.01.2017 / 11:40

2 answers

How to update the recyclerView after updating data via dialog More than one chart with Chart.js

score 4 · Answer 1

Creating% parent with div , and position: relative child with div should solve your problem, as long as position: absolute child is positioned at a distance equivalent to 50% of container% parent%) less than half of its own size. This distance must be as high as it is to the left. This can be done as follows:

.filho{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Note that, in this way, the size of% of parent% does not matter.

.filho{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pai{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: aqua; 
}

<div class="pai">
    <div class="filho">Texto texto texto</div>
</div>

Try changing the size of% parent% to understand behavior.

score 0 · Answer 2

0

In the text div put **margin: 0 auto;**

20.01.2017 / 11:47