Html 如何垂直对齐标题中的多行p标记？

我真的很难在HTML中垂直居中

p

标记。我正试着遵循这个方法，但似乎无法使它起作用

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;

    .inner-header {
        font-family: "museo-sans", Avenir, sans-serif;
        margin: auto;
        max-width: 850px;
        min-width: 150px;
        width: 75%;
        display: table;

        .name {
            float: left;
            font-family: "ff-tisa-web-pro", Georgia, serif;
            font-size: 1.8em;
            line-height: 40px;
            margin: 65px 55px 0 0;
            display: table-cell;
            vertical-align: middle;
        }
    }
}

前两个只是div，

.name

是一个

h1

希望CSS足以让我清楚地知道我想要完成什么。我只想要一个可以有多行的“name”字符串，无论它显示多少行，都要垂直居中

---

我做错了什么？

先重写CSS，然后再修改

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;
}

.inner-header {
    font-family: "museo-sans", Avenir, sans-serif;
    margin: auto;
    max-width: 850px;
    min-width: 150px;
    width: 75%;
    display: table;
}

.name {
    float: left;
    font-family: "ff-tisa-web-pro", Georgia, serif;
    font-size: 1.8em;
    line-height: 40px;
    margin: 65px 55px 0 0;
    display: table-cell;
    vertical-align: middle;
}

我从未见过你的CSS代码是可能的。您还可以使用

div.site-header div.internal-header h1.name

或

div.site-header>div.internal-header>h1.name来改进CSS

将您的N代码更改为：

<div class="site-header">
    <div class="inner-header">
        <h1 class="name">
    </div>
</div>



正如ElefantPhace所说。然后一切都会变得简单。
如果你有一个纯粹的CSS问题，只提供CSS。不用麻烦发布Sass。我的CSS是Sass，它允许嵌套，这就是为什么我将其标记为Sass。你刚才是不是把它改写成不受欢迎的？因为这看起来并没有改变任何事情。事实是，我并没有经历过SASS等等。我真的把它改写成不受欢迎的。没有你的HTML代码，我帮不了你更多。