外链论坛

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

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

[复制链接]

2993

主题

119

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99159256
发表于 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
回复

使用道具 举报

2927

主题

2万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

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

使用道具 举报

2971

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-5 20:40 , Processed in 0.065505 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.