Как выставить блок прижатый вниз по центру горизонтально?

Question

[Taras Vladychko]

Всеи привет, нужна помощь. Никак не могу выставить по центру горизонтально прижатый вниз блок с красной рамкой.

<div class="features__container-cards">
                    <div class="features-card__item">
                        <div class="feature-card__bg">
                            <img class="feature-card__img" src="img/features-bg1.jpg" alt="">
                        </div>
                        <div class="features-card__content">
                            <div class="features-card__heading">
                                <h3 class="features-card__title">Supports All Currencies and Cards</h3>
                            </div>
                            <div class="features-card__info">
                                <p class="features-card__text">We support all popular currencies and is fully customizable
                                    to add</p>
                            </div>
                            <div class="features-card__link">
                                <a class="card__link" href="#">Read More</a>
                            </div>
                        </div>
                    </div>

.features__container-cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.features-card__item{
    width: 100%;
    max-width: 350px;
    height: 355px;
    position: relative;
    margin-right: 10px;
    border: 2px solid blue;
}

.features-card__item-third{
    margin-right: 0;
}

.feature-card__img{
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    position: absolute;
    z-index: 1;
}

.features-card__content{
    width: 100%;
    max-width: 293px;
    height: 198px;
    background-color: white;
    position: absolute;
    z-index: 5;
    bottom: 0;
    border: 2px solid red; 
}

Answer 1

[Andrey Vasilev]

Comments

[Taras Vladychko]

Спасибо за быстрый ответ) все сработало)

[Andrey Vasilev]

Taras Vladychko, :)
можно ещё прижать к низу по-другому. если добавить align-items: baseline

[sergski]

но лучше position: absolute вовсе не использовать, а сделать flex-direction: column и прижать к низу justify-content: flex-end.

Answer 2

[Дима]

position: absolute не лучшее средство для таких целей. Проще использовать margin: 0 auto + margin-top *нужный отступ в пикселях*: https://jsfiddle.net/whkjt082/