Как сделать пиктограмму вертикально в центре, когда я ввожу небольшой однострочный контент в поле наведения?это возможно или нет?

Question

Здравствуйте, я пытался установить icon on hover , но работает нормально, когда содержимое ящика совпадает со строкой, но когда я ввожу небольшое содержимое в одну строку в любом полечем значок был неправильный по вертикали центр также у меня есть вложение, что проблемы и что я хочу.Я не установил положение относительно и верх с процентом, пожалуйста, любое решение для isses.содержимое не является блоком при наведении курсора. Спасибо за внимание .

Код той же строки :

При вводе маленькой однострочной строки:

section { padding: 100px 0; }
            img { max-width: 100%; }
            * { box-sizing: border-box; }
            figure {
                position: relative;
            }
            .blog-hover-icon { 
                -webkit-transition: 0.3s;
                transition: 0.3s;
                position: absolute;
                height: 100%;
                width: 100%;
                background: rgba(37, 37, 37, 0.5);
                top: 0;
                left: 0;
                text-align: center;
                z-index: 1;
                visibility: hidden;
                opacity: 0;
            }
            .box .blog-hover-icon {
                visibility: visible;
                opacity: 1;
            }
            .box .blog-hover-icon span {
                font-size: 30px;
                line-height: 30px;
                color: #fff;
                position: relative;
                top: 12%;
            }
            .box .post-content {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 30px;
                background-color: #252525;
                z-index: 2;
                color: #fff;
            }
            .box .post-content a {
                color: #5971ff;
            }
            .box .post-content a:hover {
                text-decoration: none;
            }
            .box .post-content p {
                display: none;
            }
            .box:hover .post-content p {
                display: block;
            }
            .box .post-content .author {
                margin-top: 10px;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
            <div class="container">
                <div class="row h-100">
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text</p>
                                    <div class="author">
                                        <span class="text-uppercase">25 jun / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">05 dec / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </section>

Answer 1

Пожалуйста, измените ваш HTML и CSS-код, как показано ниже, и обновите его.

section { padding: 100px 0; }
            img { max-width: 100%; }
            * { box-sizing: border-box; }
            figure {
                position: relative;
            }
            figure figcaption {
                position: absolute;
                bottom: 0;
                top: 0;
                height: 100%;
                width: 100%;
                -ms-flex-direction: column;
                -webkit-box-orient: vertican;
                -webkit-box-direction: norman;
                flex-direction: column;
                display: -ms-flexbox;
                display: -webkit-box;
                display: flex;
                -webkit-transition: 0.3s;
                transition: 0.3s;
            }
            .blog-hover-icon { 
                -webkit-transition: 0.3s;
                transition: 0.3s;
                z-index: 1;
                visibility: hidden;
                opacity: 0;
            }
            .box:hover .blog-hover-icon {
                visibility: visible;
                opacity: 1;
            }
            .box .blog-hover-icon span {
                font-size: 30px;
                line-height: 30px;
                color: #fff;
                position: relative;
                top: 12%;
            }
            .box .post-content {
                padding: 30px 40px;
                background-color: #252525;
                z-index: 2;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                color: #fff;
            }
            .box .post-content a {
                color: #5971ff;
            }
            .box .post-content a:hover {
                text-decoration: none;
            }
            .box .post-content p {
                display: none;
            }
            .box:hover .post-content p {
                display: block;
            }
            .box .post-content .author {
                margin-top: 10px;
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
            <div class="container">
                <div class="row h-100">
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design.</a></div>
                                    <p>Lorem Ipsum is simply.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </section>

Answer 2

Добавление высоты к тегу <p> для правильного отображения при наведении курсора.

.box .post-content p {
    display: none;
    height: 80px;
    max-height: 100%;
}

Answer 3

Использовать flexbox, в родительском как следующий CSS

.container{
display:flex;
align-items:center;
height:100vh;
jsutify-content:center;
}

Answer 4

Используйте это:

.box .blog-hover-icon span {
    font-size: 30px;
    line-height: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

Это также будет работать с реальной позицией