div高度设为百分比垂直居中问题

.time {
            display: table-cell;
            vertical-align: middle;
            height: 100%;
            width: 50%;
            text-align: left;
        }

        .function_btn {
            display: table-cell;
            vertical-align: middle;
            height: 100%;
            width: 50%;
            text-align: right;
  }
 <form class="layui-form" style="display: table;height: 100%;width: 100%;">
            <div class="layui-form-item time">
                <div class="layui-inline">
                    <label class="layui-form-label">统计时间</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="startTime" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">至</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" id="endTime" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="function_btn" >
                <button type="button" class="layui-btn">重新统计</button>
                <button type="button" class="layui-btn" onclick="openDia();">统计说明</button>
                <button type="button" class="layui-btn" onclick="openDia();">查看日报</button>
                <button type="reset" class="layui-btn">重置</button>
            </div>
        </form>

效果如下：

注意不管父元素还是子元素都要设置好宽高，不然text-align这种可能看不到效果，即水平方向的对齐