例如: .parent{ position: relative; width: 500px; height: 300px; background: #ccc; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; width: 200px; height: 100px; border: 1px solid #000; }
以上代码中,大家创建了一个父级标签和一个二级标签,父级标签的position属性设置为relative,即相对定位,而子级标签则设置了position属性为absolute,即绝对定位。此时,给子级标签添加top、left、transform样式,使得该标签在父级标签内部固定在中心位置。
需要注意的是,这种方法只适用于父级标签以相对定位为属性值,并且在父级标签中只存在一个子级标签的情况。如果父级标签属性值为其他定位方式,并且存在多个子级标签,那么需要使用其他的布局方式和技巧来实现标签的固定。