欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html+css的垂直居中容器

程序员文章站 2022-04-12 14:00:36
...
这次给大家带来html+css的垂直居中容器,使用html+css的垂直居中容器的注意事项有哪些,下面就是实战案例,一起来看一下。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        .parent{            width: 400px;            height: 400px;            border:1px solid gray;            position: relative;
        }        .child{            width: 100px;            height: 100px;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;            background: pink;            position: absolute;
        }    </style></head><body>
    <div class="parent">
        <div class="child"></div>
    </div></body></html>

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

相关阅读:

在HTML中用CSS实现文本截断

JS实现贝叶斯分类器

H5的Canvas如何实现绘制音乐环形频谱图

以上就是html+css的垂直居中容器的详细内容,更多请关注其它相关文章!