垂直居中而不使用表格单元且高度未知答案

【问题标题】：Vertically center without using table-cell and with an unknown height垂直居中而不使用表格单元且高度未知
【发布时间】：2014-02-17 15:16:29
【问题描述】：

我正在尝试将具有未知高度的文本块居中，并且表格单元格也不适用于它（宽度需要是父项的 100%）。我试图居中的部分是 headerText p 类。我在下面包含了 html/css。任何帮助都会非常感谢！

HTML

<div class="headerContent">                      
            <a href="#" class="scrollup">Scroll</a>
            <a href="#windSection" id="scrolldown">Scroll</a>

            <h1 class="title">Title</h1>

            <p class="headerText">
                TEST GOES HERE. THIS IS THE TEXT I AM TRYING TO CENTER. IT HAS NO SET HEIGHT.>
            </p>

            <div class="green select">

                <a class="button" href="links/calculator.html">Discover</a>

            </div>

            <img class="people" src="images/people.png" />

            <p class= "noElechouse"></p>

        </div>

CSS：

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
}

.headerText {
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
}

【问题讨论】：

你愿意接受以 JavaScript 为中心的 JavaScript 吗？
是的，我对 javascript 很好，虽然我更喜欢 css 版本@KevinPei
对不起@JoshC 这是 headerText 类。我会把它添加到我的问题中谢谢！
@kduan 你想把它放在标题和“发现”链接之间？如果是这样，您可能需要从 h1 元素中删除 padding-bottom/margin。不过，table-cell 没有理由在这种情况下不起作用。什么高度未知？是headerText 还是别的什么？
感谢工作！ @JoshC

标签： html css center vertical-alignment

【解决方案1】：

在不知道高度的情况下，您将不得不使用百分比来估计它的大小，即，

.headerText { width:90%; height:50%; margin:25% 5%; }

或使用 javascript 将其垂直居中

#headerText { width:90%; top:50%; margin:0 5%; } //CSS

var eh = document.getElementByID('headerText'); //change from class to ID
eh.margin.top = -(eh/2);

或所有 jQuery

ht = $('.headerText');
elH = ht.height();
wH = $(window).height();

marginTop = (wH/2)-(elH/2);
ht.css('margin-top',-marginTop);

【讨论】：

【解决方案2】：

在你的情况下，你不需要为此使用 JavaScript。

首先从.title 元素中删除padding-bottom:15px 并将margin 的值设置为0。然后给.headerText元素留出0 auto 10px的边距；它将margin-top 设置为0，并将margin-bottom 设置为10px。鉴于元素的宽度为90%，auto 用于水平居中。垂直对齐不再是问题，因为两个垂直相邻的元素都有10px 的分隔边距。

EXAMPLE HERE

.title {
    font-family:'Oxygen', sans-serif;
    font-weight:700;
    font-size:90px;
    padding:0;
    margin:0;
}
.headerText {
    font-family:'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    width:90%;
    margin:0 auto 10px;
}

或者，您也可以使用以下内容：

.headerText {
    font-family:'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    width:100%;
    margin:0 auto 10px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

【讨论】：