html - Center block (paragraph) inside div -

there example in jsfiddle .

small description: div 300x300 might 500x500 or 100x100 in future (so need flexible solution) background image (which size:cover don't care size).

inside div there <p> hight of 50px (but might 100px or 25px in future) has text inside (20) , background-color bit transparent (blue).

i want center inside div , sollution should flexible (so future changes won't take few hours fix images/ideas manually, cool use % values.

has idea?

one way:

.cover-price{     height: 300px;     width: 300px;     background-repeat: no-repeat;     background-size: cover;     position:relative; /*make container relative*/ }  .cover-price p{     line-height: 50px;     width: 100%;     height: 50px;     background-color: rgba(43,32,122, .3);     color: pink;     position:absolute; /*make p absolute*/     top: calc(50% - 50px); /*give top 50% - height of p*/ } 

fiddle

using calc since have specified css3 in tags

if not using calc lack of support below ie9 can specify top value height of container/2-height of para i.e here top: 100px;