垂直 - 对齐中间在引导程序中不起作用

Question

我是bootstrap的新手。我试图纵向和横向对齐页面中心的内容。

<div class="parent">
    <div class="child">
        <div class="content">
            <h1>Heading</h1>
            <p>Some random text.</p>
        </div>
    </div>
</div>

我创建了一个基本的HTML布局并添加了一些CSS

.parent {
    display:table;
}
.child {
    display:table-cell;
    vertical-align:middle;
}
.content {
    text-align:center;
}

但它并没有在中间对齐。我在这里错过了什么吗？

https://jsfiddle.net/himakar/vc20j1xv/4/

Answer 1

你需要给它一些东西来对齐：

试试这个：

body {
    display:table;
    height: 100vh;
    width: 100%;
}

垂直对齐意味着 - 对齐，但你必须给外部一个值来对齐

Updated fiddle

我会说，我不会像那样修改和调整身体！

Answer 2

尝试在margin: 0 auto元素上添加body，将其与中心对齐。

body {
    display: table;
    margin: 0 auto;
}

JsFiddle