标题: css居中--padding填充 [打印本页]

---

作者: vicky.yu    时间: 2024-5-7 14:03     标题: css居中--padding填充

利用 padding 和 background-clip 配合实现div的水平垂直居中：
通过 background-clip 设置为 content-box, 将背景裁剪到内容区外沿，再利用 padding 设为外 div 减去内 div 的差的一半，来实现：
实例
.children {

width: 100px;

height: 100px;

padding: 50px;

background-color: black;

background-clip:content-box;/*居中的关键*/


尝试一下 »
效果如下所示：

微信截图_20201112101718

提示：关于 padding 的使用，你可以参考 CSS padding 属性部分。

hacks, hacks（小技巧）
有许多 hacks ，负 margin，影子元素 : : before 等。如果你的内容不是固定大小的话，它们大部分是很脆弱的。

---

欢迎光临 赛捷软件论坛 (http://114.215.210.180/bbs/)

Powered by Discuz! 7.2