天涯论坛

 找回密码
 立即注册
搜索
查看: 63|回复: 5

css使元素怎么样居中暗示?

[复制链接]

3039

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99119141
发表于 2024-6-30 09:45:27 | 显示全部楼层 |阅读模式

1、已知宽度的元素居中

思路:居中元素父级设置相对定位,居中元素绝对定位,距离顶部 top:50%,左边left:50%,经过margin-top、margin-left等于负的居中元素宽高的一半。

.box{position:relative;width:200px;height:300px;}

.a{position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-100px;}

2、未知宽度的元素居中

思路:居中元素父级设置相对定位,居中元素绝对定位,距离顶部 top:50%,左边left:50%,而后运用css

3 transform:translate(-50%; -50%)使元素居中。

.box{position:relative;width:200px;height:300px;}

.




上一篇:CSS居中的几种方式
下一篇:css居中布局的几种办法
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-21 15:30:38 | 显示全部楼层
“BS”(鄙视的缩写)‌
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-5 13:12:57 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-19 00:35:43 | 显示全部楼层
你的话深深触动了我,仿佛说出了我心里的声音。
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-26 01:42:17 | 显示全部楼层
外链论坛的成功举办,是与各位领导、同仁们的关怀和支持分不开的。在此,我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢!
回复

使用道具 举报

3069

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-11-5 10:26:00 | 显示全部楼层
论坛是一个舞台,让我们在这里尽情的释放自己。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 07:58 , Processed in 0.110210 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.