在另一個div中間的垂直中心div

我想將header-headline div垂直居中在標題div中間，但無論我嘗試什麼，我都無法讓它坐在中間。任何人都可以建議嗎？在另一個div中間的垂直中心div

HTML

<div class="main-wrapper-onepage"> 
<!-- header --> 
<div class="header"> 
<div class="header-headline">Dan Morris</div> 
</div> 
<!-- header-end --> 
</div>

CSS

.header { 
    width:100%; 
    height:667px; 
    background-image:url(../images/header_background.jpg); 
    background-size:cover; 
    text-align:center; 
} 

.header-headline { 
    width:100%; 
    text-align:center; 
    font-size:70px; 
    color:#FFF; 
    font-family: 'Montserrat', Helvetica, Arial, sans-serif; 
    display:inline-block; 
    vertical-align:top; 

}

的jsfiddle這裏：https://jsfiddle.net/w77pdnxh/

來源

2016-03-29 iamdanmorris

的[水平居中一個div在一個div]可能的複製（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） –

當你說中心，你的意思是水平中心或垂直中心？當我運行你的jfiddle時，它會爲我水平居中。 – JoeL

您需要支持哪些瀏覽器版本？ HTML5是一種選擇嗎？如果是這樣，Flexboxes有一個很好的解決方案。否則，你需要用內聯塊做一些技巧。 –

你可以垂直居中使用flexbox's align-items: center頭。代碼如下：

.header { 
    ... 
    display: flex; 
    align-items: center; 
}

JSFiddle Here

來源

2016-03-29 21:21:25

設置的header-header的位置相對，然後top:50%如示於下的jsfiddle。 header-header將relative到外部格，並放置在頂部和底部之間的中間點。

https://jsfiddle.net/w77pdnxh/2/

來源

2016-03-29 21:23:00 JoeL

將'margin-top：-50％;'添加到'.header-headline'來說明div的大小，並且您已經完全集中了它。 –

@MikeC昨晚我下班開車回家時，我突然意識到自己忘記了div的大小。所以好的呼籲:) – JoeL

在另一個div中間的垂直中心div

回答

相關問題