html - 如何垂直居中文本并让深蓝色条横跨整个屏幕

Question

我想将文本“New from Subaru”垂直和水平居中。另外，我的文字有深蓝色背景。我希望深蓝色背景在整个 div 上水平延伸。我该怎么做？

J fiddle : http://jsfiddle.net/huskydawgs/eL7rwLx3/21/

wrapper-promo { background-color: #3862ad; border: 2px solid #2251a4; margin: 10px 0; width: 500px; }

.title-top {
    background-color: #2251a4;
    display: table;
    height: 40px;  
    overflow: hidden;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
}

h2 {
    font-family:SegoeBold;
    font-size:1.4em;
    color:#fff;
    margin: 10px 0 -10px 0;
}

h2.block-title {
    margin: 0;
    text-align: center;
}

h3 {
    font-family:SegoeBold;
    font-size:1em;
    color:#fff;
}
 .promo-content p {
     font-family: helvetica, Arial,sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
 }

<div class="wrapper-promo">
<div class="title-top">
    <div class="title-top-cell">
        <h2 class="block-title">New from Subaru</h2></div></div>
    <div class="promo-content">
        <h2>
            Subaru Guide for Small Business</h2>
        <h3>
            Starts at $45/month</h3>
        <p>
            Adventure has a stylish side. The 2015 Subaru Outback was designed to allow you to experience the world like you never have before.</p>                
</div>
</div>

Answer 1

如果您这样做，它会在您的 title-pop div 中一直延伸您的 block title div。

h2.block-title {
margin: 0 auto;
text-align: center;
width: 100%;
}