Блог

Я видел эту проблему в нескольких местах здесь, но в решениях всегда были небольшие исправления (например, включая -moz-, опечатки и т. Д.), Все из которых (я полагаю) Я проверил. Я пытаюсь использовать flex для центрирования некоторого текста по вертикали в его контейнере. Он работает на 100% в Chrome, но и в Firefox, и в Safari мне не так повезло — текст, который я пытаюсь отобразить, всегда оказывается за пределами моего контейнера (обычно справа). В ручке на http://codepen.io/drewtadams/pen/XjYrGB , я использую квадраты с заданной высотой / шириной, но мне нужно, чтобы они могли работать более динамично, чем «top: 65px; left: 65px;» — встроенные элементы (черные квадраты) будут текстовыми. Есть ли исправление для display: 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;
        }

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

PS У меня есть второй контейнер, с которым я играю под гибким контейнером в ручке.

Почему бы вам не установить их высоты одинаковыми, а затем установить второй контейнер для выравнивания по вертикали по центру. Я бы использовал плагин, подобный matchHeight.js . Это очень просто, и вы просто добавляете соответствующий тег данных к каждому элементу, и он устанавливает высоты. например, и . Это будет соответствовать высотам для вас, а затем просто используйте базовое поле flex, чтобы центрировать их по вертикали.

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;
    }
  

Найдено действительно простое решение в https://css-tricks.com/snippets/sass/centering-mixin / использование некоторых scss:

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

HTML:

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