大屏幕尺寸的中心div（垂直和水平）

我有一個div（greenpromobox），它可以完美顯示在我的筆記本電腦和手機屏幕上。大屏幕尺寸的中心div（垂直和水平）

但是，在我的大顯示器上，它靠近頂部，在其周圍創造了大量的空白空間。

我想使用％來保持greenpromobox在垂直和水平中間，即使在大屏幕上也是如此。

直播鏈接：http://185.123.96.102/~kidsdrum/moneynest.co.uk/

HTML：

<div class="special"> 
<div class="jumbotron"> 
    <div class="text-center"> 
    <h1 class="boldme hidden-xs hidden-sm">Wish you were taught personal finance at school? We do too</h1> 
    <div class="greenpromobox"> 
    <h2 class="boldme">Aged 20-30 and frustrated with money?</h2> 

    <h3 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> secure your financial future</h3> 






        <button data-sumome-listbuilder-id="d55c3ad2-17a7-47bb-9cf1-b16320caac27" class="text-uppercase btn btn-primary btn-lg-top">Start Class Now</button></div> 


</div> 
</div> 
</div> 
    </div>

CSS

.greenpromobox { 
    background-color: green; 
    padding-top: 1px; 
    margin-top: 5%; 
    max-width: 740px; 
    border-radius: 5px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 20px; 
} 

.jumbotron { 
background-image: url("../img/young-people-with-no-money-worries.jpg"); 
background-size: cover; 
color: white; 
}

注：我使用的引導3.

來源

2016-04-05 Sam Jefferies

我們可以使用position屬性在'.greenpromobox'這個屬性？ –

就像你喜歡的@GauravAggarwal –

更新你的CSS使用Flexbox的

.jumbotron { 
    align-items: center; 
    background-image: url("../img/young-people-with-no-money-worries.jpg"); 
    background-size: cover; 
    color: white; 
    display: flex; 
    justify-content: center; 
}

來源

2016-04-05 09:19:59

把一切都放到中心，包括h1文本，它需要進一步向北。我認爲媒體查詢可能是唯一的選擇。 –

謝謝我在帶有margin-top的媒體查詢中使用.greenpromobox在媒體查詢@ min-width：1628px上使用此解決方案：-4％; 這固定了主要問題，但後來我需要推H1，當我使用margin-bottom來做這個事情時，我在greenpromobox和h1之間進入了一個舞蹈，它們之間的差距越來越大，有沒有更好的方法來定位他們？ –

試試這個。

.text-center { 
    text-align: center; 
    display: table-cell; 
    width: 100%; 
    vertical-align: middle; 
} 

.jumbotron { 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    display: table; 
}

來源

2016-04-05 09:17:05

一個非常簡單的和最流行的方式，以中心位置財產水平和垂直對齊一個div

CSS

.greenpromobox { 
    background-color: green; 
    position: absolute; 
    top:50%; 
    left:50%; 
    width:300px;//change accordingly or even not necessary to define 
    height:300px;//change accordingly or even not necessary to define 
    transform:translate(-50%,-50%); 
    -moz-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
    -o-transform:translate(-50%,-50%); 
}

上面的CSS將中心對齊div水平和垂直無論高度和寬度如何。

隨着轉換屬性，建議你應該使用前綴LILE -moz-，-webkit-，-ms-和-o-將支持在所有瀏覽器

來源

2016-04-05 09:24:20

感謝Gaurav，這在我的大顯示器上非常出色，但在移動設備上表現出色，因爲它顯示在其他內容的頂部？ –

使用'@media'查詢並在較小的屏幕中更改css –

大屏幕尺寸的中心div（垂直和水平）

回答

相關問題