Carousel 顯示文字並置中

最近工作上用到廣告輪播 (boostrap 中的 carousel)，上面要求要能在底圖上顯示文字，後來發現 carousel 中有個 class 叫做 carousel-cpation 就可以直接上字，只是無法對齊圖片中間位置，尋求 google 大神協助下，CSS提供了二個屬性(display:flex & align-items:center)立馬解了我的燃眉之急，flex 使用了 box-model 並讓所有內容置中(align-items:center)就大功告成.. 那還不快寫下來，就對不起它了。

HTML:
       <div>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="/image/AAA.jpg" alt="..." class="bannerImg">
                        <div class="carousel-caption">
                            <div id="bannerId1" class="full-width">
                                <h4> Here is First Content </h4>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="/Image/BBB.jpg" alt="..." class="bannerImg">
                        <div class="carousel-caption">
                            <div id="bannerId2" class="full-width">
                                <h4> Here is Second Content</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> </a>
            </div>

CSS:
         .full-width {
            width: 100%;
        }

        .carousel-caption {
            position: absolute;
            top: 0;
            display: flex;
            align-items: center;
            height: 100%;
        }