Question

我有一个div（greenpromobox），可以在我的笔记本电脑和手机屏幕上完美显示。

然而，在我的大显示器上，它靠近顶部，在它周围创造了大量的空白空间。

即使在大屏幕尺寸上，我也想使用％来保持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;
}

注意：我正在使用Bootstrap 3。

Answer 1

尝试一次。

fname=code.fonctions[1].getNom();

Answer 2

使用flexbox

更新您的CSS

.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;
}

Answer 3

一种非常简单且最流行的方法，可以使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。

使用transform属性，建议您使用前缀lile -moz-，-webkit-，-ms-和-o-它将在所有浏览器中支持此属性

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

3 个答案: