如何在相对 div 中居中绝对段落答案

【问题标题】：How to center an absolute paragraph inside a relative div如何在相对 div 中居中绝对段落
【发布时间】：2014-08-09 15:35:13
【问题描述】：

我想将一个绝对定位在另一个相对定位的 div 中的段落居中。问题是因为这是绝对的，所以我不能使用 text-align: center！另外我想将段落垂直和水平居中...... 我的 HTML 看起来像这样

<div class="top">

    <p class="same">Django</p>

</div>

CSS

.top
{
    width: 100%;
    height: 70px;
    position: relative;
}
.same
{
    position: absolute;
}

我希望段落文本“Django”在垂直和水平方向都位于中心 (http://i.imgur.com/MNcaBYs.jpg)

【问题讨论】：

你需要支持哪些浏览器？
.same { 位置：绝对；宽度：100%；文本对齐：居中； }。这样你就可以使用 text-align: center.

标签： html css alignment center paragraph

【解决方案1】：

你根本不需要绝对定位来实现你想要的：

.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }

您可以强制段落具有inline 布局，然后使用text-align: center 将它们水平居中。要使它们垂直居中，只需将line-height 添加到等于容器height 的段落中（这不是问题，因为容器的高度是固定的）。如果您不想显式设置display: inline，则可以使用span 而不是p。

JSFiddle

【讨论】：

如果您想在top div 中包含多个.same 段落，会发生什么？ :)
@Nicolae Olariu ：然后会有另一个解决方案。）我只是坚持上下文，你知道，问题说明非常清楚地指出了这一点。如果 OP 想要别的东西，他可以在这里发表评论或更新帖子，这样可以更好地说明问题。

【解决方案2】：

您可以通过以下方式实现。

.top
{
    width: 100%;
    height: 70px;
    position: relative;
}
.same
{
    position: absolute;

    height: 50%; /* This is mandatory i.e. this should not be auto */
    text-align: center;
    width: 70%; /*This is not mandatory*/

    /* The code below is required to horizontally and vertically center the <p> element */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

【讨论】：