顯示：flex無法在Firefox或Safari瀏覽器中使用

Question

我在這里已經在多個地方看到了這個問題，但是解決方案總是有一些小問題（例如-moz-，錯別字等），我已經檢查了所有這些問題。 我正在嘗試使用flex在其容器中垂直放置一些文本。 它可以在Chrome中100％正常運行，但是在Firefox和Safari中，我運氣都不太好-我嘗試顯示的文本始終在容器外部（通常在右側）結束。 在http://codepen.io/drewtadams/pen/XjYrGB的筆中，我正在使用設置了高度/寬度的正方形，但我需要它能夠比“ top：65px; left：65px; ” -內聯元素（黑色正方形）將為文本。 顯示屏是否可以固定：彎曲，還是有更好/更傳統的方式來做到這一點？

HTML：

<div class="flex-container valign--center">
    <div class="box-container valign--center">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box-container valign--center">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box-container valign--center">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box-container valign--center">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</div>

CSS：

.valign {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}
.valign--center {
    @extend .valign;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
}

.flex-container {
    border: 1px dashed red;

    .box-container {

        .box1 {
            background-color: green;
            height: 100px;
            width: 100px;
            margin: 25px;
        }
        .box2 {
            background-color: black;
            display: none;
            height: 20px;
            width: 20px;
            position: absolute;
            z-index: 2;
        }

        &:hover {
            .box1 {
                opacity: 0.6;
            }
            .box2 {
                display: inline;
            }
        }
    }// end .box-container
}// end .flex-container

PS：筆筒內的flex容器下面有一個我正在玩的第二個容器。

Answer 1

為什么不將它們的高度設置為相同，然后將第二個容器設置為在中心垂直對齊。 我會使用像matchHeight.js這樣的插件。 這非常容易，您只需在每個元素上放置一個匹配的數據標簽，它就會設置高度。 例如和。 這將為您匹配高度，然后只需使用基本的柔韌性框將它們垂直居中。

https://github.com/liabru/jquery-match-height

這是一些flexbox垂直中心代碼。

.vertical_center{
        display:flex;
        flex-direction:column;
        justify-content:center;
        resize:vertical;
        align-items:center;
        min-height:25px;
    }

Answer 2

使用一些scs在https://css-tricks.com/snippets/sass/centering-mixin/上找到了一個非常簡單的解決方案：

@mixin centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

HTML：

.parent {
    position: relative;
}
.child {
    @include centerer;
}