有例如在的jsfiddle 。

小说明：事业部是 300×300 ，但可能会在未来的500×500或100×100（所以需要灵活的解决方案）与背景图片（即尺寸：覆盖所以不在乎大小）。

Small description: Div is 300x300 but might be 500x500 or 100x100 in future (so need flexible solution) with background image (which is size:cover so don't care about size).

在这个 DIV 有＆LT; P＆GT; 与50像素的HIGHT（但可能是100像素或25像素的未来），它内部有文字（20）和背景颜色就是有点透明的（蓝色）。

Inside this div there is <p> with hight of 50px (but might be 100px or 25px in future) which has text inside (20) and background-color that is a bit transparent (blue).

我想这里面居中 DIV 和sollution应该是灵活的（所以对于未来的变化也不会需要几个小时来手动修复所有图像/想法，所以这将是冷静使用％值。

I want to center it inside this div and sollution should be flexible (so for future changes it won't be take a few hours to fix all images/ideas manually, so it would be cool to use % values.

有没有人一个想法？

推荐答案

方式一：

.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 as 50% - height of p*/
}

小提琴

Fiddle

使用计算的，因为你已经指定CSS3的标签的

如果不使用钙缺乏的下方IE9支持，您可以指定顶值对即这里顶：100像素;

If not using calc for lack of support below IE9 the you can specify the top value as height of the container/2-height of para i.e here top: 100px;