外链论坛

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

css中垂直居中的方式你晓得几种呢?

[复制链接]

3050

主题

119

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99159052
发表于 2024-6-30 06:13:21 | 显示全部楼层 |阅读模式

#写css时会遇到非常多垂直居中样式,区别的方式会达到一样的效果,以下方式可供参考。

如让<p> 在 <div>中垂直居中,其中div 标签的宽度、高度分别是400px, 1px的实线边框; p标签背景色是红色。

<div class="box"> <p>hello everyone</p> </div>

办法一 :grid布局重视浏览器是不是支持运用

<style> .box { width: 400px; height: 400px; border: 1px solid ; display: grid; justify-content: center; align-items: center; } p { bac公斤round: red; }

办法

.box { width: 400px; height: 400px; border: 1px solid ; display: grid; justify-content: center; align-content: center; } p { bac公斤round: red; }

办法

.box { width: 400px; height: 400px; border: 1px solid ; display: grid; } p { bac公斤round: red; margin: auto; }

办法

.box { width: 400px; height: 400px; border: 1px solid ; display: flex; } p { bac公斤round: red; margin: auto; }

办法五 :常用方式

.box { width: 400px; height: 400px; border: 1px solid ; display: flex; justify-content: center; align-items: center; } p { bac公斤round: red; }

办法六:p必要是inline或是line-block状态

.box { width: 400px; height: 400px; border: 1px solid ; display: table-cell; vertical-align: middle; text-align: center; } p { bac公斤round: red; display: inline-block; }

办法七:margin必要设为0,绝对定位是元素的外边距相对参考元素的边框内壁

.box { width: 400px; height: 400px; border: 1px solid ; position: relative; } p { bac公斤round: red; position :absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); margin: 0; }

办法八: 空标签的line-height的值必要与父元素的值相同

.box { width: 400px; height: 400px; border: 1px solid ; text-align: center; } .box::after { content: ; line-height: 400px; } p { bac公斤round: red; display: inline-block; }

办法九:此办法必要设置p元素的宽高,否则充满父元素 (此办法已废弃不意见运用

.box { width: 400px




上一篇:10个CSS办法实现元素水平垂直居中 元素不定宽高居中办法
下一篇:怎么让一个 div 水平垂直居中?
回复

使用道具 举报

2994

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569140
发表于 2024-10-7 17:09:49 | 显示全部楼层
我完全同意你的观点,说得太对了。
回复

使用道具 举报

3048

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

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

使用道具 举报

3078

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158903
发表于 2024-11-8 16:29:54 | 显示全部楼层
这篇文章真的让我受益匪浅,外链发布感谢分享!
回复

使用道具 举报

3127

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-24 17:23 , Processed in 0.250420 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.