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

Hello, 欢迎登录 or 注册!

/ 0评 / 0

本文作者:  本文分类:前端开发  浏览:358
阅读时间:418字, 约1分钟

方法一:使用定位属性+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;

关于作者

本作品采用 知识共享署名-非商业性使用 3.0 (CC BY-NC 3.0) 许可协议进行许可。

发表评论

您的电子邮箱地址不会被公开。