Updated JSFiddle

Question

我的问题是图片而且段落不在页面屏幕的中央而是转到底部。任何人都可以帮我这个吗？

<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

无论大小如何，都应该为您设置中心元素：

.center {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

http://jsfiddle.net/XGq5V/

更新：

使没有明确尺寸的元素居中变得相当复杂。在您的情况下，您应该将您希望居中的元素包装在父<div>：

中

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

...所以我们可以让孩子们使用“幽灵”来帮助他们。保持打开的元素：

.center {
    text-align: center;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
 .center:before {
    content:'oooh, a ghost';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width:1px; overflow:hidden;
    text-indent:-1000px;
    margin-right: -1px;
}
/* center the child */
 .center > * {
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/XGq5V/1/

可以在http://css-tricks.com/centering-in-the-unknown/

阅读有关各种技术的更多讨论

Answer 2

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

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

Updated JSFiddle

Answer 3

您正在寻找absolute centering technique。

有很多方法可以做到，它们各有优缺点，但这是最简单的方法：

.center{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
}

Demo

Answer 4

尝试此代码：

img.center {
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
p.center{
text-align:center;
margin-top:50px; // change it according to your need
}

现场演示：http://jsfiddle.net/UTn2N/

如果您将图像和段落放在div中，那么将它们放在中心位置很容易。

Answer 5

如果你想让元素处于绝对中间，试试这个更简单的方法：

HTML：

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

CSS：

centered-container {
    display: table;
    position: absolute;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.centered-elements{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

http://jsfiddle.net/YMCLJ/13/

如何在页面屏幕中间制作我的图片和段落

5 个答案:

Updated JSFiddle