如何在带有显示表的div下用显示内联块来居中div？

Question

我只想保留容器的显示表并显示h1的表格单元格（使其垂直居中）并且我想在h1下面放一个箭头并从红色div中取出

我的代码是：

.container{
    display:table;
    width:200px;
    height:50px;
    background-color:red;
    text-align:center;
}
.h1{
    display:table-cell;
    vertical-align:middle;
}
.sub{
    width: 0px;
    height: 0px;
    position: absolute;
    margin: 0px auto;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 30px solid black;
    display: inline-block;
}

<div class="container">       
    <h1> title 1 </h1>
    <div class="sub"></div>
</div>

Answer 1

我觉得这种方式好一点：

http://jsfiddle.net/es_kaija/dqjb6kqr/15/

<div class="container">
     <h1> title 1 </h1>
</div>

.container {
    display:table;
    width:200px;
    height:50px;
    background-color:red;
    text-align:center;
    position: relative;
}

h1 {
    display:table-cell;
    vertical-align:middle;
}

.container:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 30px;
    margin-left: -30px;
}