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

Question

我正在尝试将高度未知的文本 block 居中，表格单元格也无法正常工作(宽度需要为父元素的 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;
}

Answer 1

在您的情况下，您不需要为此使用 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;
}