外链论坛

 找回密码
 立即注册
搜索
查看: 115|回复: 7

css学习之路(1)-居中的几种办法

[复制链接]

2993

主题

330

回帖

9919万

积分

论坛元老

Rank: 8Rank: 8

积分
99199244
发表于 2024-6-30 09:52:50 | 显示全部楼层 |阅读模式

1、css的居中方式-垂直对齐:

.verticalcenter{ position:relative; top:50%; transform:translateY(-50%); }

ps:这种方式的垂直对齐重点应用在块状元素中,缺点是外边容器必须设置height,有兼容性的问题,但写了前缀绝大部分的浏览器都能够兼容,除了IE那几个。。。

那样针对垂直居中的办法最简单的则是设置高度:

.spancenter{ height:40px; line-height:40px; }

缺点:只能用在一行中并不可多行垂直对齐

2、水平对齐

div{ text-align:center; }

ps:适用于文本的对齐方式

div{ margin: 0 auto; }

ps:块元素最常用的居中方式

table-cell居中 ,表格布局中所有东西都是居中的

<div class="center-align"> <div class="center-core"> <img src=""/> </div> </div> .center-align { display: table; bac公斤round: hsl(120, 100%, 97%); width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; }

PS:这种方式虽然必须额外的包裹一个外边容器,外边容器必须设置高度,但兼容性极好。

运用absolute定位居中,这种方式兼容所有的浏览器。缺点便是必要显式的声明外边容器的高度:

.absolute-aligned { position: relative; min-height: 500px; bac公斤round: hsl(200, 100%, 97%);} .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}




上一篇:CSS中居中对齐元素的办法
下一篇:CSS居中对齐、
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-20 02:21:00 | 显示全部楼层
你的努力一定会被看见,相信自己,加油。
回复

使用道具 举报

3090

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098764
发表于 2024-10-1 08:33:27 | 显示全部楼层
祝福你、祝你幸福、早日实现等。
回复

使用道具 举报

3062

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139045
发表于 2024-10-18 11:58:15 | 显示全部楼层
可以发布外链的网站 http://www.fok120.com/
回复

使用道具 举报

3090

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098764
发表于 2024-10-24 15:48:45 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

3121

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108633
发表于 2024-10-27 02:15:33 | 显示全部楼层
系统提示我验证码错误1500次 \~゛,
回复

使用道具 举报

3062

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139045
发表于 2024-10-30 15:34:30 | 显示全部楼层
回顾历史,我们不难发现:无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。
回复

使用道具 举报

3132

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968646
发表于 6 天前 | 显示全部楼层
回顾过去一年,是艰难的一年;展望未来,是辉煌的一年。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 23:04 , Processed in 0.164972 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.