Rumah  >  Artikel  >  hujung hadapan web  >  html+css的垂直居中容器

html+css的垂直居中容器

php中世界最好的语言
php中世界最好的语言asal
2018-03-12 16:39:221502semak imbas

这次给大家带来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如何实现绘制音乐环形频谱图

Atas ialah kandungan terperinci html+css的垂直居中容器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:js中比较运算符应如何科学使用Artikel seterusnya:网站的分页思路