使表格单元格为父级的100％宽度

Question

How would I make the table-cell 100% width of the parent.

It works perfectly fine when the text is long enough to reach the full width of the element but when the text is not it doesn't want to center whilst using table-cell and vertical-align: middle;

Here is a fiddle:

https://jsfiddle.net/DTcHh/7471/

Answer 1

Update:

Here's a better solution using a flex-box:

jsFiddle

h4 {
    height: 50px;
    font-size: 1em;
    width: 100%;
    font-style: oblique;
    color: #FFF;
    text-align: center;
    margin-left: 5px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
   }