垂直 - 对齐中间不能在引导工作

Question

我是新手引导。我试图将页面中心的内容垂直和水平对齐。

<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

尝试的body元素添加margin: 0 auto对准它的中心。

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

JsFiddle