table-cell / table / table-cell。不能垂直居中中间元素

Question

我正在使用表格方法来自动维度3个元素。 我喜欢中间得到所有剩余空间 - 第一个和最后一个单元格。 好的，这可以使用table / table-cell - table - table-cell。

但是我无法为中央细胞设置垂直对齐？

<div style="display: table; width: 163px; height: 80px;">

	<div style="display: table-cell; vertical-align: middle; width: 1px;">c1</div>

	<div style="display: table;>
	   <div style="display: table-cell; vertical-align: middle; width: 100%;">
	   <div>c2</div>
	   </div>
	</div>

	<div style="display: table-cell; vertical-align: middle; width: 1px;">c3<div>

</div>

我已经尝试了很多样式与'<div style="display: table; width: 163px; height: 80px;"> <div style="display: table-cell; vertical-align: middle; width: 1px;">c1</div> <div style="display: table;> <div style="display: table-cell; vertical-align: middle; width: 100%;"> <div>c2</div> </div> </div> <div style="display: table-cell; vertical-align: middle; width: 1px;">c3<div> </div>'单元及其父母没有成功。 我是否要将垂直尺寸设为中央“c2”列？

我想要这种方法的解决方案（表元素样式）

任何帮助将不胜感激。

Answer 1

使用display: table-cell制作中央单元vertical-align: middle：

＆＃13;

＆＃13;

<div style="display: table; width: 163px; height: 80px; background: coral;">
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;">c1</div>
    <div style="display: table-cell; vertical-align: middle;">
        <div>
            <div>c2</div>
        </div>
    </div>
    <div style="display: table-cell; vertical-align: middle; width: 1px; background: #DDD;">
        c3
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;