Rumah > Artikel > hujung hadapan web > html+css的垂直居中容器
这次给大家带来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中文网其它相关文章!
相关阅读:
Atas ialah kandungan terperinci html+css的垂直居中容器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!