CSS выравнивание по вертикали внизу и по центру

Question

Я нашел много решений, но ни один из них не работал для меня. В следующей разметке текст «пример lorem ipsum» должен быть выровнен снизу и центрирован. Я не могу понять это!

#box { 
 
\t \t background:#6CCB61 \t 
 
\t } 
 
\t .wrapper div { 
 
\t \t height: 240px; 
 
     width:100%; 
 
\t \t margin: 10px 0 20px 0; 
 
\t \t box-sizing:border-box; 
 
\t \t padding: 10px; 
 
\t \t color:white; 
 
\t \t text-align:center; 
 
\t } 
 
\t #boxGreen span { 
 
\t \t vertical-align: bottom; 
 
\t } 
 

 
\t .wrapper { 
 
\t \t width:auto; \t \t 
 
\t \t margin: 0 10px; 
 
\t } 
 
\t #boxGreen { 
 
\t \t width:100%; \t 
 
\t } 
 
}

<div class="wrapper">   
 
     <div id="box"> 
 
     \t <span>Lorem Ipsum Example</span> 
 
     </div> 
 
</div>

Answer 1

попробовать это:

#box { 
    background:#6CCB61; 
    position: relative; 
} 

#box span { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    bottom: 0; 
} 

https://jsfiddle.net/veefmgna/