【问题标题】：<p> in vertical center of a 100% height div [duplicate]<p> 在 100% 高度 div 的垂直中心 [重复]
【发布时间】：2014-04-01 17:18:30
【问题描述】：

我的 div 高度是 100%，但是当我这样做时，我不知道如何将 P-tag 垂直居中。

我该怎么做？

HTML：

<div>
<p>This text has to be vertically centered.</div>
</div>

CSS：

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
    background: url(http://www.windsim.com/images/sky/sky_107.bmp) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

p {
    font-family: "Times New Roman", Times, serif;
    color: black;
    text-align: center;
    font-size: 65px;
}

【问题讨论】：

哦抱歉，搜索没有找到这个，谢谢！

标签： css center

【解决方案1】：

一种方法是使用下面概述的方法，注意body 和html 样式是可选的，用于在提供的小提琴中创建更好的插图。

关键在于<p> 需要包含在父元素中，并且两者都需要下面列出的样式。

Fiddle

HTML

<div>
    <p>text</p>
</div>

CSS

html, body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;

}
div {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

p {
  display: table-cell;
  vertical-align: middle;
}

我还建议你看看some of the alternative approaches shown here

【讨论】：