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

【问题标题】：Make table-cell 100% width of parent使表格单元格的宽度为父级的 100%
【发布时间】：2015-05-08 20:13:23
【问题描述】：

如何使表格单元格的宽度为父级的 100%。

当文本足够长以达到元素的全宽时，它工作得非常好，但是当文本不是时，它不想居中，同时使用 table-cell 和 vertical-align: middle;

Here is a fiddle:

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

【问题讨论】：

你的小提琴对我来说一切都很好。绿色是父容器宽度的 100%。尝试不同的浏览器
但是里面的文字没有居中。

标签： html css

【解决方案1】：

更新：

这是一个使用 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 */
   }

【讨论】：

您好，感谢您的帮助，但这不是我所追求的。我需要文本在框中垂直和水平居中。当文本没有以 100% 的宽度运行时，我似乎无法让它们同时工作。行高不是一个解决方案，有些文本在 2 行上，有些在 1 上