上下居中对齐上下居中( 二 ) _云知道

子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {position: relative;}
.son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
}
</style>
<body>
<div class=\”father\” style=\”width: 100%; height: 400px; border: 1px solid rebeccapurple;\”>
<div class=\”son\” style=\”width: 100px; height: 100px;background: palegreen;\”></div>
</div>
</body>方法四（定位）理念：
定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。
步骤：
父div标记下定位（position:relative|absolute|fixed|sticky）;子div绝对定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {position: relative;}
.son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</style>
<body>
<div class=\”father\” style=\”width: 100%; height: 400px; border: 1px solid rebeccapurple;\”>
<div class=\”son\” style=\”width: 100px; height: 100px;background: palegreen;\”></div>
</div>
</body>方法五（flex）理念
弹性盒子，自带的一个居中功能
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {display: flex; align-items: center}
.son {margin: auto}
</style>
<body>
<div class=\”father\” style=\”width: 100%; height: 400px; border: 1px solid rebeccapurple;\”>
<div class=\”son\” style=\”width: 100px; height: 100px;background: palegreen;\”></div>
</div>
</body>
flex兼容性，以及存在的已知问题
结尾
方法二和方法三兼容性要比其它好些
参考资料
Can I usecss-vertical-center-solutionCSS实现垂直居中的5种方法–前端观察
(今完)

上下居中对齐上下居中( 二 )

推荐阅读

伤感视频原声伤感原声名字

鸢尾几月开花，鸢尾不开花？

2023河北省专升本考试报名公告

双马尾的小丑女是哪部电影了解一下电影讲述的故事

本田CRV音响改装四步完成升级

金鼓鱼煮熟了还有毒吗

金西梅吃了对身体好吗金西梅对身体有没有好处

逍客是哪个品牌的车

哪个牌子奶瓶质量最好最安全哪个奶瓶牌子好

附近有什么好玩的地方

教你华为手机拍照怎么设置自动加水印

有健康管理证可以从事什么工作

大天使格斗家穿什么套装,格斗家/男格斗国庆套完全体

牙膏含氟量标准是多少

宋体字和黑体美术字区别

凯里哪里看中医比较好的医院比较好,寻医问药专家网

上下居中对齐 上下居中( 二 )

推荐阅读

上下居中对齐上下居中( 二 )