帝王谷资源网 Design By www.wdxyy.com
原始代码:
center.html
:
<!DOCTYPE html> <html lang="Zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="stylesheet" href="center.css"> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
center.css
:
body { background-color: #6ed0ff; } .father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px; } .son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px; }
原始效果:
实现子盒子相对于父盒子垂直居中效果:
1. grid
.father { display: grid; } .son { align-self: center; justify-self: center; }
2. absolute
+ 负margin
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
3. absolute
+ transform
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
4. absolute
+ margin: auto
.father { position: relative; } .son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
5. flex
.father { display: flex; justify-content: center; align-items: center; }
6. margin
+transfrom
.father { overflow: hidden; } .son { margin: 50% auto; transform: translateY(-50%); }
7. table-cell
.father { display: table-cell; text-align: center; vertical-align: middle; } .son { display: inline-block; }
8. inline-block
+ vertical-align
.father { text-align: center; line-height: 300px; } .son { display: inline-block; vertical-align: middle; }
标签:
CSS,盒子,水平垂直居中
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月05日
2024年07月05日
- dnf强化基础精通适合哪些职业
- V.A中国管弦乐纪念名盘《乡之音》FLAC
- [雨果]赵鹏《赵鹏·LPCD45》LPCD45[WAV+CUE]
- 群星《八大女声》发烧天后精华版[WAV+CUE]
- 非卖品《2021成都国际音响纪念CD》[WAV+CUE][706M]
- 童安格《挚爱珍藏版》 1:1母盘直刻版[WAV分轨][492M]
- 《甄选157首抖音车载DJ.解压100%》[FLAC/MP3][4.6G]
- 许志豪.2011-爱一半【上豪】【WAV+CUE】
- 群星.1994-鼓舞飞扬【宝丽金】【WAV+CUE】
- 群星.1995-鼓舞飞扬95【宝丽金】【WAV+CUE】
- dnf怎么提升名望值
- dnf怎么改名字
- dnf怪物图鉴怎么拿奖励
- 萧丽珠2000-金曲精选专辑3CD[台湾版][WAV+CUE]
- 群星.2004-《高雄国际Hi-End音响大展纪念发烧金碟》[WAV分轨]