垂直居中，高度可变

Question

我遇到以下问题：我想将一些文本垂直居中。我知道，这并不难，但我需要在不知道任何元素高度的情况下将其居中。高度变化太大，我不能给它一定的高度。

我的HTMLDOM:

<div class="list">

<div class="plus-sign-box">
    <div class="plus-sign-box-sign"></div>
    <div class="plus-sign-box-text">
        <div class="inner-box">
            <p>

                Lorem ipsum dolor sit amet, consectetuer adipiscin…

            </p>
        </div>
    </div>
</div>
<div class="plus-sign-box">
    <div class="plus-sign-box-sign"></div>
    <div class="plus-sign-box-text">
        <div class="inner-box">
            <p>

                Nulla consequat massa quis enim. Donec pede justo,…

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

这是我的 CSS:

 list {
    font: inherit;
    padding: 0px;
    border: 0px none;
    margin: 0px;
    vertical-align: baseline;
    background: #444;
}

.plus-sign-box {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
}

.plus-sign-box-text {
    width: 75%;
    color: #FFF;
    height: 100px;
    margin-left: 55px;
}

.inner-box {
    display: table;
    width: 100%;
    height: 100%;
}

.inner-box p {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
}

将“+”号垂直居中很容易，因为它的高度始终为 50 像素，但它旁边的文字没有一定的高度。

有什么帮助吗？

Answer 1

这就是我个人解决您问题的方式...

以下代码展示了如何通过使用幽灵元素垂直对齐元素...

可能的解决方案：

.outer { 
        height: auto; 
        text-align: center; 
        background: #444;
    }

    .outer:before { 
        content: ''; 
        display: inline-block; 
        height: 100%; 
        vertical-align: middle;
    }

    span {
        font-size: 50px;
        vertical-align: middle;
        color: #FFF;
    }

    .inner {  
        padding: 10px;
        width: 40rem; 
        display: inline-block; 
        vertical-align: middle;
        font-size: 20px;
        color: #FFF;
        text-transform: uppercase;
    }

<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin…</div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>

更新：

这是一个有效的 JsFiddle thanks to suslov

Answer 2

这样走怎么样

.plus-sign-box-text {
            width: 75%;
            color: #FFF;
            margin-left: 55px;
            height:auto;
    }

或

.plus-sign-box-text {
    width: 75%;
    color: #FFF;
    vertical-align:central;
    height:auto;
}

Answer 3

对我来说，理想的答案是以下网站：

howtocenterincss

总的来说，这是一个非常好的居中工具，您可以选择您的情况并获得最佳解决方案。您甚至可以选择要支持的IE版本。

垂直居中，高度可变

Vertically center with variable height

html

css

css-position

可能的解决方案：

更新：