显示：flex无法在Firefox或Safari浏览器中使用

Question

I've seen this issue several places on here, but the solutions always had some little fix (eg including -moz-, typos, etc), all of which (I believe) I have checked. I'm trying to use flex to center some text vertically within its container. It works 100% in Chrome, but in both Firefox and Safari, I haven't had as much luck - the text I'm trying to display always ends up outside my container (typically to the right). In the pen at http://codepen.io/drewtadams/pen/XjYrGB , I'm using squares with set heights/widths, but I need it to be able to work more dynamically than "top: 65px; left: 65px;" - the inline elements (black squares) will be text. Is there a fix to the display: flex, or is there a better/more conventional way to do this?

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 I have a second container I'm playing with below the flex-container in the pen.

Answer 1

Why don't you set their heights to be the same, and then the second container set to vertically align in the center. I would use a plugin like matchHeight.js. It's super easy and you just put a matching data tag on each element and it will set the heights. for example and . That will match the heights for you and then just use the basic flex box to vertically center them.

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

here is some flexbox vertical center code.

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

Answer 2

Found a really simple solution at https://css-tricks.com/snippets/sass/centering-mixin/ using some scss:

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

HTML:

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