Web前端开发-垂直居中

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #Web

HTML/CSS 专栏收录该内容

14 篇文章

订阅专栏

这是一篇关于Web前端开发的自学笔记，重点探讨了如何在HTML和CSS中实现元素的垂直居中，包括不同场景下的垂直居中问题及解决技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端开发，自学笔记整理

垂直居中

1.垂直居中问题-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <style type="text/css">
                .info1 {
                    width: 300px;
                    height: 300px;
                    background: lightblue;
                    color: brown;

                    text-align: center;
                    line-height: 300px;
                }

                .info2 {
                    width: 300px;
                    height: 300px;
                    background: lightgreen;
                    color: yellow;

                    text-align: center;
                    line-height: 300px;
                }

                .info3 {
                    width: 300px;
                    height: 300px;
                    background: lightgreen;
                    color: yellow;

                    /*仅支持行内元素、行内块元素*/
                    /*text-align: center;*/

                    overflow: hidden;
                }
                .view {
                    width: 100px;
                    height: 100px;
                    background: lightcoral;

                    /*块状元素*/
                    margin: 100px;


                }
            </style>
    </head>
    <body>
        <p class="info1">
            元素类型
        </p>
        <br />
        <div class="info2">
            <a href="#">百度一下</a>
        </div>
        <br />
        <div class="info3">
            <div class="view"></div>
        </div>
    </body>
</html>

2.垂直居中问题-2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                background: lightblue;

                text-align: center;
            }
            /*300-105 = 195 195/2=97.5*/
            .box img {
                /*margin-top:97.5px ;*/
            }
        </style>
    </head>
    <body>
        <div class="    box">
            <img src="../04-卧龙控股/img/bg.png" />
        </div>
    </body>
</html>

3.垂直居中设置技巧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                text-align: center;
            }
            p img {
                vertical-align: middle
            }

            /*
             .box是外层盒子
             img是要设置居中的内容
             span作为参考对象

             行内块元素都支持text-align、vertical-align
             1. img和span都设置为行内块元素 display: inline-block;
             2. img和span垂直居中 vertical-align: middle;
             3. .box设置水平位置居中 text-align: center;
             4. span的高度和父元素一致 height: 100%;
             5. span只是作为参考，不需要显示 width: 0;
             */
            .box {
                width: 400px;
                height: 400px;
                background: lightblue;
                text-align: center;
            }
            .box span {
                /*width: 5px;*/
                width: 0;
                /*height: 300px;*/
                height: 100%;
                background: lightgreen;
                display: inline-block;
                vertical-align: middle;
            }
            .box img {
                display: inline-block;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <!--
            原理：inline-block支持text-align和vertical-align
        -->
        <p>
            段落标签
            <img src="../04-卧龙控股/img/bg.png"
        </p>
        <div class="box">
            <!--参考对象-->
            <span></span>
            <!--显示内容-->
            <img src="../04-卧龙控股/img/bg.png" />
        </div>
    </body>
</html>