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

我的问题是图片和段落不在页面屏幕的中心，而是在底部。有人能帮我吗

电流输出：

---

无论图元大小如何，都应将其置于中心位置：

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

更新：

将一个没有明确尺寸的元素居中会变得相当复杂。在您的情况下，您应该将希望居中的元素包装在父级

：

---

---

可以在

上阅读关于各种技术的更多讨论。您需要将负的顶部和左侧边距设置为图像高度/宽度的1/2

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

你在找那个

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

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

请尝试以下代码：

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
}

现场演示：

---

如果您将图像和段落都放在一个div中，则很容易将它们放在中间。

如果您希望元素处于绝对中间位置，请尝试以下更简单的方法：

HTML:

---

段落没有居中。啊！这给工作带来了麻烦；）查看我的更新答案。因此文本和图像应水平和垂直居中，并且图像位于文本顶部？无助于居中

段落不在OP要求的屏幕中心。我认为他不希望文本与图像重叠，或图像与文本重叠。这没有任何意义，因为他可以只使用图像作为背景，并将文本居中-_-

.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;
}

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

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

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
}

<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>

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

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