外链论坛

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

web前端入门到实战:七个办法搞定CSS垂直居中

[复制链接]

2790

主题

316

回帖

9191万

积分

论坛元老

Rank: 8Rank: 8

积分
91919870
发表于 2024-6-30 06:18:15 | 显示全部楼层 |阅读模式

咱们在编辑一个版面,一般都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎便是设定margin:0 auto;或是text-align:center;,就能够容易处理掉水平居中的问题,但始终败兴最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。

七种垂直居中的办法

设定行高(line-height)添加伪元素calc动态计算运用表格或假装表格transform绝对定位运用Flexbox

设定行高(line-height)

设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline、inline-block),例如单行的标题,或是已然设为inline-block属性的div,若将line-height设成和高度同样的数值,则内容的行内元素就会被垂直居中,由于是行高,因此会在行内元素的上下都加上行高的1/2,因此就垂直居中了!不外由此就能够看出,为何必要要单行的行内元素,由于倘若多行,第二行与第1行的间距会变超大,就不是咱们所期望的效果了。CSS示例:

.div0{ width:200px; height:150px; border:1px solid #000; line-height:150px; text-align:center; } .redbox{ display:inline-block; width:30px; height:30px; bac公斤round:#c00; }

添加伪元素(::before、::after)

刚才第1办法,虽然是最简单的办法(适用于单行标题),不外便是只能单行,因此咱们倘若要让多行的元素能够垂直居中,就必要运用伪元素的方式。这里之前,先解释一下CSS里头vertical-align这个属性,这个属性虽然是垂直居中,不外指的是在元素内的所有元素垂直位置互相居中,并不是相针对外框的高度垂直居中。(下面的CSS会导致这种样子的垂直居中)

.div0{ width:200px; height:150px; border:1px solid #000; text-align:center; } .redbox{ width:30px; height:30px; bac公斤round:#c00; display:inline-block; vertical-align:middle; } .greenbox{ width:30px; height:60px; bac公斤round:#0c0; display:inline-block; vertical-align:middle; } .bluebox{ width:30px; height:40px; bac公斤round:#00f; display:inline-block; vertical-align:middle; }

因此呢倘若有一个方块

回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-23 18:23:46 | 显示全部楼层
我深受你的启发,你的话语是我前进的动力。
回复

使用道具 举报

3007

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139179
发表于 2024-10-7 00:33:13 | 显示全部楼层
感谢你的精彩评论,带给我新的思考角度。
回复

使用道具 举报

3007

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139179
发表于 2024-10-13 15:50:22 | 显示全部楼层
我深受你的启发,你的话语是我前进的动力。
回复

使用道具 举报

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

本版积分规则

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

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

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.