CSS不知高的情况下，垂直居中。

最新推荐文章于 2023-03-21 11:02:24 发布

妙莲

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量210

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44166439/article/details/113402262

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<head>
        <title>脚手架-ES2019从入门到精通</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p>宽高不定</p>
        </div>
    </body>

在这里插入图片描述

<head>
        <title>脚手架-ES2019从入门到精通</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                position: relative;
            }
            p {
                border: 1px solid blue;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p>宽高不定</p>
        </div>
    </body>

在这里插入图片描述

<head>
        <title>脚手架-ES2019从入门到精通</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                position: relative;
            }
            p {
                width: 50%;
                height: 50%;
                border: 1px solid blue;
                position: absolute;//如果页面出现滚动条就不好用了， 这时候用fixed可以解决
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p>宽高不定</p>
        </div>
    </body>

妙莲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS不知高的情况下，垂直居中。

<head> <title>脚手架-ES2019从入门到精通</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; .
复制链接

扫一扫