html - 我如何让我的图片和段落在我的页面屏幕中间

Question

我的问题是图片和段落不在页面屏幕的中央，而是到底部。谁能帮我解决这个问题？

当前输出:http://jsfiddle.net/YMCLJ/1/

<p class="center">Must be center in the screen</p>
<img class="center" src="http://i38.photobucket.com/albums/e149/eloginko/hello_zpsc60ffbf3.gif"/>

CSS

.center {
    position: absolute;
    left:50%;
    top:50%;
}

Answer 1

您需要将负的上边距和左边距设置为图像高度/宽度的 1/2。

.center {
    position: absolute;
    left:50%;
    top:50%;
    margin-top:-150px;
    margin-left:-150px;
}

Updated JSFiddle