垂直 - 對齊中間不能在引導工作

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