html+css的垂直居中容器

php中世界最好的语言 原创: 2018-03-12 16:39:22 1143浏览

这次给大家带来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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

在HTML中用CSS实现文本截断

JS实现贝叶斯分类器

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

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

html+css 样式表 css PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：js中比较运算符应如何科学使用下一条：网站的分页思路