Html 大屏幕上的中心div（垂直和水平）

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

然而，在我的大显示器上，它就在顶部附近，在周围造成了大量的空白

我想使用%使greenpromobox保持在垂直和水平的中间位置，即使在大屏幕上也是如此

实时链接：

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>

注意：我正在使用Bootstrap 3。

试试这个

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

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

试试这个

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

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

---

使用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;
}

---

使用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;
}

---

使用position属性水平和垂直居中对齐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;
}

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

，它将在所有浏览器中支持此属性

---

使用position属性水平和垂直居中对齐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;
}

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

，它将在所有浏览器中支持此属性

---

我们可以在

.greenpromobox

中使用position属性吗？就像您喜欢@gauravaggarwal一样，我们可以在

.greenpromobox

中使用position属性吗？就像您喜欢@GauravAggarwalThanks Gaurav一样，这在我的大屏幕上效果非常好，但在移动设备上，它在其他内容上方显示时会倾斜？使用

@media

查询并更改较小屏幕中的css Hanks Gaurav，这在我的大屏幕上效果非常好，但在移动设备上，它显示在其他内容的顶部时会倾斜？使用

@media

查询并更改较小屏幕中的css将所有内容放在中间，包括h1文本，需要更北。我认为媒体查询可能是唯一的选择。谢谢，我在最小宽度为1628px，带.greenpromobox的媒体查询中使用了此解决方案，在页边空白顶部为：-4%的媒体查询中使用此解决方案；这解决了主要问题，但我需要将H1向上推，当我使用边距底部进行此操作时，我在greenpromobox和H1之间输入一个舞蹈，它们之间的间隙不断扩大，是否有更好的方法来定位它们？将所有内容放在中间，包括H1文本，需要进一步向北。我认为媒体查询可能是唯一的选择。谢谢，我在最小宽度为1628px，带.greenpromobox的媒体查询中使用了此解决方案，在页边空白顶部为：-4%的媒体查询中使用此解决方案；这解决了主要问题，但我需要将H1向上推，当我使用边距底部进行此操作时，我在greenpromobox和H1之间输入一个舞蹈，它们之间的差距不断扩大，有更好的方法定位它们吗？