外链论坛

 找回密码
 立即注册
搜索
查看: 88|回复: 3

CSS居中对齐、

[复制链接]

3063

主题

2万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158953
发表于 2024-6-30 09:54:04 | 显示全部楼层 |阅读模式

本文将讨论可用于居中对齐元素的6种CSS技术(根据最佳实践排序),以及每一种技术最适合应用的场景。这儿,居中对齐指的是将元素安置在其父元素的水平和垂直中心。

.center类表率要居中对齐的元素

.parent类表率其父元素。

1. 运用变换(Transform)

什么时候用:

当元素的宽度和高度未知时;卡片式弹出框中有多个子元素,其中一个焦点元素位置于中心。

这个思路是运用绝对定位——top和left 50%,而后应用负变换。top和left中运用的值按照父元素的尺寸解析,而translate办法中的值按照元素本身的尺寸解析。

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

2. 运用Flex

什么时候用:

当有一个或多个元素要居中时;当子元素是动态的并且体积未知时;当有一行项目必须像页脚同样居中时。

这个思路是使父容器作为flexbox并运用flex属性将元素沿水平和垂直方向居中,如下所示。

.parent { display: flex; justify-content: center; align-items: center; }

当有多个元素必须一个在另一个元素上方堆叠,并使该元素堆叠在其中心时,咱们只需添加以下代码行:

flex-direction: column;

3. 运用负边距

什么时候用:

当元素的高度和宽度已知时。

这个思路是再次运用类似于变换技术的绝对定位,但应用的是元素宽度和高度一半的负边距而不是平移。

$w: 200px; /* SCSS 变量 */ $h: 100px; /* SCSS 变量 */ .center { position: absolute; top: 50%; left: 50%; margin: -50px -100px; /* Negative margin of half the width and heigh */t }

为了使这段代码更通用,咱们运用calc()属性,如下所示:

(#{$h} / 2) - 一半高度

(#{$h} / 2) * -1) - 一半高度的负值

这般能够

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);

4. 运用网格(Grid)

什么时候用:

仅有一个子元素必须居中时。

这个思路是创建一个网格容器并将边距设置为auto。在非网格容器中,当margin设置为auto时,margin-top和bottom取值为0。

然则,在网格容器中,margin-top和bottom平均分配可用空间,从而使元素居中。

.parent { display: grid; } .center { margin: auto; }

另一种运用网格来实现居中的办法是:

.parent { display: grid; place-items: center; }

5. 运用填充(Padding)

意见将此技术用于中心对齐,但它是可行的。

什么时候用:

当父元素的高度已知按时其中心元素的高度为弹性可变时。

这个思路是为已知固定高度的容器设置固定的垂直填充,并准许子元素占据最大高度和自动边距。

.parent { height: 600px; //Fixed height padding: 200px 0; //Fixed vertical padding } .center{ margin: 0 auto; height: 100%; // Child takes max height }

6. 运用表格单元格

这个技术此刻用得比较少,然则值得借鉴。并且,它确实是可行的。

这个思路是运用display强制父级表现得像





上一篇:css学习之路(1)-居中的几种办法
下一篇:CSS 怎么样居中一个元素
回复

使用道具 举报

3053

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139078
发表于 2024-10-2 04:11:12 | 显示全部楼层
感谢你的精彩评论,为我的思绪打开了新的窗口。
回复

使用道具 举报

3112

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108663
发表于 2024-10-21 07:02:34 | 显示全部楼层
你的话深深触动了我,仿佛说出了我心里的声音。
回复

使用道具 举报

3063

主题

2万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158953
 楼主| 发表于 2024-10-23 21:21:19 | 显示全部楼层
软文发布论坛开幕式圆满成功。 http://www.fok120.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-14 23:47 , Processed in 0.108834 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.