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

卑微站长23564~

相关推荐

Leave a Reply

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

CSS两种方法实现水平垂直居中
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close