外链论坛

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

CSS3 垂直居中实现办法

[复制链接]

3046

主题

2万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098928
发表于 2024-6-30 05:25:54 | 显示全部楼层 |阅读模式

CSS里实现水平居中非常容易,inline元素用text-align:center;,block元素用margin:auto;就行了。但要实现垂直居中确是一大困难。本篇收集了有些已知的方法,整理出来,以备将来取用。

• Flex弹性盒子

• absolute绝对定位

• vh视口单位

Flex弹性盒子Flex弹性盒子应该是处理垂直居中的最佳方法,随着IE10的逐步没落,惹人烦的兼容性问题正逐步被克服。用法很简单,给必须垂直居中的元素的父容器设置display:flex,并指定align-items: center;就搞定了:

body { … display: flex; align-items: center; } main { … display: flex; align-items: center; justify-content: center; flex-direction: column; } <body> <main> <div>用flex实现</div> <p>垂直居中</p> </main> </body>

咱们想将main垂直居中,只需给它的父元素body设display:flex;和align-items: center;就可。main里有一个div和一个p,想将这两个元素在main里垂直居中,一样只需给它们的父元素main设display:flex;和align-items: center;。另外justify-content和flex-direction用于调节这两个子元素水平居中的摆列次序。(倘若对弹性盒子及其属性不熟悉,能够参照CSS3 flex盒子语法介绍,能够点例子页面试一下)

absolute绝对定位一种很平常办法是用绝对定位协同负值margin。思路是设成absolute后,指定top和left为50%,将元素的左上角定位点放到页面正中心。而后用负值margin一半的元素宽高度将元素拉回页面正中心:

main { position: absolute; width: 18em; height: 10em; top: 50%; left: 50%; margin-top: -9em; margin-left: -5em; … }

但缺点是你必须事先指定元素的width和height,否则法给负margin设值,显出不足灵活。并不必固定元素的宽高,改用translate()位移来替代负margin,实现将元素拉回页面正中心:(倘若对变形元素不熟,能够参照CSS3 transform介绍)

main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); … } <main> <div>用absolute实现</div> <p>垂直居中</p> </main>

用绝对定位absolute让必须垂直居中的元素脱离文档流,指定top和left各50%将元素左上角定位点设到页面正中心。而后用translate()各负50%,将元素拉回页面正中心。思路和负margin是一致的,优良是不必固定元素的宽高了。缺点是absolute绝对定位威力太大,要思虑是不是会对页面布局造成影响。

vh视口单位

上例中translate()将元素回拉的前提是,absolute绝对定位来设top和left各50%。但倘若看到absolute绝对定位就觉得不舒服,能够改成vh视口单位来设元素左上角的定位点。

vh便是视口高度,vw是视口宽度。例如1vh暗示视口高度的1%。

vmin是视口宽高的小值,例如vh
main { width: 9em;
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-26 16:36:51 | 显示全部楼层
楼主果然英明!不得不赞美你一下!
回复

使用道具 举报

0

主题

771

回帖

7

积分

新手上路

Rank: 1

积分
7
发表于 2024-9-6 12:13:07 | 显示全部楼层
软文发布平台 http://www.fok120.com/
回复

使用道具 举报

3003

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139269
发表于 2024-10-10 05:13:50 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-9 01:41 , Processed in 0.079453 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.