Question

我在这里已经看过几个地方的这个问题，但解决方案总是有一些小修复（例如包括-moz-，拼写错误等），所有这些（我相信）我已经检查过了。我正在尝试使用flex在其容器中垂直居中一些文本。它在Chrome中运行100％，但在Firefox和Safari中，我没有那么多运气 - 我试图显示的文本总是在我的容器外面（通常在右边）。在http://codepen.io/drewtadams/pen/XjYrGB的笔中，我使用的是设置高度/宽度的方块，但我需要它能够比“top：65px; left：65px;”更加动态地工作。 - 内联元素（黑色方块）将是文本。是否有一个修复显示：flex，还是有更好/更传统的方式来做到这一点？

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

P.S。我有一个第二个容器，我正在笔中的弹性容器下面玩。

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

使用一些scss在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;
}

显示：flex在firefox或safari中不起作用

2 个答案: