大屏幕尺寸的中心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（垂直和水平）

回答

相关问题