外链论坛

 找回密码
 立即注册
搜索
查看: 73|回复: 4

纯CSS实现垂直居中的几种办法

[复制链接]

3129

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968654
发表于 2024-6-30 05:19:49 | 显示全部楼层 |阅读模式
垂直居中是布局中非常平常的效果之一,为实现良好的兼容性,PC端实现垂直居中的办法通常经过绝对定位,table-cell,负边距等办法。有了css3,针对移动端的垂直居中就更加多样化。

办法1:table-cell ====设置父元素

办法2:display:flex ====设置父元素
办法3:绝对定位和负边距【子元素固定宽高】===设置子元素
办法4:绝对定位和0====设置子元素
重视这种办法跟上面的有些类似,然则这儿经过margin:auto和top,left,right,bottom都设置为0实现居中,缺一不可,很神奇吧。不外这儿得确定内部元素的高度,能够用百分比,比较适合移动端。倘若设置宽高,那样就默认宽高为100%;

办法5:translate【设置宽高】====设置子元素

实质上是办法3的变形,移位是经过translate来实现的。然则办法三是得写出固定的宽高,而translate的办法不消

办法6:display:inline-block【父元素的伪类after和子元素都得设置】

==========display:inline-block; vertical-align:middle;

这种办法确实巧妙...经过:after来占位。

办法7:display:flex和margin:auto【父元素设置flex,子元素设置margin:auto】

重视:子元素能够是display:block;是display:inline-block;但不能够为position:absolute;父元素有相对定位都能够

办法8:display:-webkit-box【父元素设置】

总结:设置父元素的办法:1、

table-cell(vertical-align:middle) 2、display:flex (justify-content:center; align-items:center;)3、办法8:display:-webkit-box【父元素设置】

设置子元素的办法:1、绝对定位和负边距【子元素固定宽高】(left,top,margin-left,margin-top)2、绝对定位和0====设置子元素(left,bottom,right,top为0,margin:auto;五者缺一不可)3、办法5:translate【设置宽高】====设置子元素(和办法3的区别便是不消设置子元素详细宽高)==transform:translate(-50%,-50%);top:50%;left:50%;

父元素和子元素都得设置1、display:inline-block【父元素的伪类after和子元素都得设置】

==========display:inline-block; vertical-align:middle;2、display:flex和margin:auto【父元素设置flex,子元素设置margin:auto】





上一篇:CSS布局-垂直居中
下一篇:CSS 垂直居中的正确打开方式
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-23 07:14:45 | 显示全部楼层
你说得对,我们一起加油,未来可期。
回复

使用道具 举报

3037

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109078
发表于 2024-10-1 01:25:03 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

2940

主题

3万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979445
发表于 2024-10-20 18:24:26 | 显示全部楼层
你的见解独到,让我受益匪浅,非常感谢。
回复

使用道具 举报

3083

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098788
发表于 2024-11-7 22:03:56 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-18 03:38 , Processed in 0.123391 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.