外链论坛

 找回密码
 立即注册
搜索
查看: 95|回复: 2

css实现div垂直水平居中的2种常用办法

[复制链接]

3000

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109180
发表于 2024-6-30 05:59:39 | 显示全部楼层 |阅读模式

办法一:

利用vertical-align:middle进行垂直方向上的居中对齐,此办法必须满足的要求

设置父元素的行高line-height等于父元素height的高度子元素必要是行内块级元素display:inline-block;子元素设置vertical-align:middle此办法研发不可右浮动(不可靠右边)

下方是完整代码,能够新建一个HTML文件进行测试(绿色的盒子):

<html> <head> <title>导航条</title> <meta charset="utf-8" /> </head> <style> *{ margin:0; padding:0; } .div1{ height:200px; bac公斤round:yellow; /*行高等于容器高度*/ line-height:200px; } .div2{ width:100px; height:100px; bac公斤round:green; /*行内块级元素*/ display:inline-block; /*中线和父元素基线上方出对其,参考字母"x"*/ vertical-align:middle; } .div3{ width:100px; height:100px; bac公斤round:red; display:inline-block; } </style> <body> <div class="div1"> xxxxxxxxxxx <div class="div2" > </div> <div class="div3" > </div> </div> </body> </html>

办法二:

这种办法比较暴力,利用定位处理

父元素开启相对定位子元素绝对定位子元素先向下移动父元素的50%,此时子元素的顶部与父元素的中线对齐了子元素再向上移动自己高度"height"的一半,此时子元素的中线和父元素的中线对齐了此办法能够右对齐,设置子元素right:0px;就可

下方是完整代码,能够新建一个HTML文件进行测试(绿色的盒子):

<html> <head> <title>导航条</title> <meta charset="utf-8" /> </head> <style> *{ margin:0; padding:0; } .div1{ height:200px; bac公斤round:yellow; /*相对定位开启*/ position:relative; } .div2{ width:100px; height:100px; bac公斤round:green; /*绝对定位*/ position:absolute; /*能够右对齐*/ right:0px; /*先向下移动父元素的50%,此时子元素的顶部与父元素的中线对齐了*/ top:50%; /*再向上移动自己高度"height"的一半,此时子元素的中线和父元素的中线对齐了*/ margin-top:-50px } </style> <body> <div class="div1"> <div class="div2" > </div> </div> </body> </html>

我是学姐,一个正在创业的前端工程师,倘若一样迷茫不晓得前端该怎样学习,能够加入我的自学团,会有知识分享,匹配学习伙伴,还能够参加我组织的上线项目及活动。

想加入的伙伴给我留言直接私信。

作者:编程匠工

链接:css实现div垂直水平居中的2种常用办法





上一篇:css水平垂直居中办法
下一篇:平板电脑扩容的几种办法,你晓得几种?
回复

使用道具 举报

3050

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065840
发表于 2024-10-3 10:28:07 | 显示全部楼层
大势所趋,用于讽刺一些制作目的就是为了跟风玩梗,博取眼球的作品。
回复

使用道具 举报

3075

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158913
发表于 2024-10-16 05:42:05 | 显示全部楼层
太棒了、厉害、为你打call、点赞、非常精彩等。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 19:12 , Processed in 0.266378 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.