html - 当我在悬停框中输入小一行内容时，如何使图标垂直居中？可能与否？

Question

你好，我试图在悬停时设置icon，但当框内容在同一行时工作正常，但当我输入small content one line时在任何图标不垂直居中的框中，我也有附件是什么问题和我想要的。我设置了相对位置和顶部百分比，请提供任何解决方案。内容在框悬停时没有阻塞。 提前致谢。

同行代码:

输入小一行内容时:

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>