CSS两种方法实现水平垂直居中

方法一:使用定位属性+transform

本方法通用,方便,推荐使用。

给您要水平垂直居中的元素添加以下css属性:

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

给body添加相对定位属性:

position: relative;

即可实现。本站登录页面既是使用本方法实现的。

若要更改位置,直接改translateXtranslateY的属性值即可。

方法二:使用flex

本方法更加方便,但是有时候会出bug。

给您要水平垂直居中的元素添加以下css代码即可:

display: flex;
justify-content: center;
align-items: center;

但是要调相对位置就比较麻烦了。

如果只要水平居中

更加简单,通过一个小技巧即可实现:

margin: 0 auto;

如果是文字,推荐直接使用:

text-align: center;
版权声明:本文为博主EricNTH原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://nth.ink/front-end/P3142.html

(广告由我们的赞助商提供,内容与本站无关)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇