使9格的流畅3x3网格显示

Question

小提琴 | 全屏

编辑： 更新小提琴 | 全屏

在上面的代码中，我成功地制作了一个9 div的3x3网格（其中8个通过jQuery克隆）。 网格水平居中，但不垂直居中。 有没有太复杂的垂直居中方法（首选CSS解决方案）。

另外，我必须在CSS中使用!important来给div#game1我div#game1 min-height和min-width 。 还有其他方法吗？

---

编辑：更新代码

jQuery的

(function($) {
    var $game1 = $('div#game1');
    var $game2 = $('div#game2');

    for (var i = 0; i < 8; i++) {
        $game1.append($('div.frame').eq(0).clone());
    }

    var $frame = $game1.find('div.frame');

    $(window).on('resize', function() {
        var windowW = window.innerWidth, windowH = window.innerHeight;
        var gameLen = windowW < windowH ? windowW : windowH;
        $game1.css({
            'width':  gameLen + 'px',
            'height': gameLen + 'px'
        });
    });
    $(window).trigger('resize');

})(jQuery);

的HTML

    <div id="game1">
    <!-- this is one frame. Its cloned and repeated 8 more times -->
    <div data-win="-" class="frame">
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div data-sign="-" class="signbox"></div>
        <div class="winsign"></div>
    </div>
</div>

的CSS

html, body {
    width: 100%; height: 100%;
    min-width: 500px;
    min-height: 500px;
    margin: 0;
    font-family: 'Open sans', sans-serif;
}

body {
    background-image: -webkit-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:    -moz-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:     -ms-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:      -o-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
    background-image:         radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
}

div {
    box-sizing: border-box;
}

#game1, #game2 {
    min-width: 500px;
    min-height: 500px;
    margin: auto;
}

.frame {
    float: left;
    position: relative;
    width: 32%; height: 32%;
    margin: 0.66%;
}

.frame > .winsign {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.frame .signbox {
    float:  left;
    width: 33.33%; height:  33.33%;
    border: 0px solid rgba(0, 0, 0, .5);
    overflow: hidden;
}

.frame:nth-child(1) { background: rgba(255, 0, 0, .3);   }
.frame:nth-child(2) { background: rgba(0, 255, 0, .3);   }
.frame:nth-child(3) { background: rgba(0, 0, 255, .3);   }
.frame:nth-child(4) { background: rgba(111, 111, 0, .3); }
.frame:nth-child(5) { background: rgba(0, 111, 255, .3); }
.frame:nth-child(6) { background: rgba(255, 0, 121, .3); }
.frame:nth-child(7) { background: rgba(77, 25, 255, .3); }
.frame:nth-child(8) { background: rgba(12, 12, 123, .3); }
.frame:nth-child(9) { background: rgba(255, 255, 5, .3); }

Answer 1

在类框架中有一个带display：inline-block的BUG，您可以用float：left代替。