центр DIV в DIV с абсолютным позиционированием с помощью Flexbox

Question

Других проблемы центра с помощью CSS, я хочу центр а DIV внутри другого DIV с абсолютным позиционированием, я хочу, чтобы получить аналогичный результат этого изображения:

предпочтительно с использованием Flexbox, пример кода:

.abs_1 { 
 
    position: absolute; 
 
    background: red; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 40px; 
 
    left: 40px; 
 
} 
 

 
.abs_2 { 
 
    position: absolute; 
 
    background: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 60px; 
 
    left: 250px; 
 
} 
 

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

 
.center div { 
 
    background: black; 
 
    color: white; 
 
}

<div class="abs_1"> 
 
    <div class="center"> 
 
     <div>Hello.</div> 
 
    </div> 
 
</div> 
 

 
<div class="abs_2"> 
 
    <div class="center"> 
 
     <div>World</div> 
 
    </div> 
 
</div>

Я получаю следующее:

вы могли бы сделать это с помощью гибкого CSS?

Answer 1

Вот решение, использующее CSS Flexbox.

CSS

#container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.abs_1 { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 10px; 
    background: red; 
    height: 200px; 
    width: 200px; 
} 

.abs_2 { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 10px; 
    background: blue; 
    height: 200px; 
    width: 200px; 
} 

.center > div { 
    background: black; 
    color: white; 
} 

HTML

<div id="container"> 

    <div class="abs_1"> 
     <div class="center"> 
      <div>Hello.</div> 
     </div> 
    </div> 

    <div class="abs_2"> 
     <div class="center"> 
      <div>World</div> 
     </div> 
    </div> 

</div><!-- end #container --> 

DEMO: http://jsfiddle.net/3ekyetc0/