如何垂直居中文本并使深蓝色条穿过整个屏幕

Question

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

jsfiddle： http : //jsfiddle.net/hus​​kydawgs/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

如果你这样做，它会在你的标题弹出 div 中一直延伸你的块标题 div。

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