本文作者:Tianheng Ni
本文分类:前端开发 浏览:1705
阅读时间:418字, 约1分钟
方法一:使用定位属性+transform
本方法通用,方便,推荐使用。
给您要水平垂直居中的元素添加以下css属性:
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
给body添加相对定位属性:
position: relative;
即可实现。本站登录页面既是使用本方法实现的。
若要更改位置,直接改translateX
和translateY
的属性值即可。
方法二:使用flex
本方法更加方便,但是有时候会出bug。
给您要水平垂直居中的元素添加以下css代码即可:
display: flex;
justify-content: center;
align-items: center;
但是要调相对位置就比较麻烦了。
如果只要水平居中
更加简单,通过一个小技巧即可实现:
margin: 0 auto;
如果是文字,推荐直接使用:
text-align: center;
关于作者Tianheng Ni
- 卑微站长23564~ 苣蒻OIer,电脑爱好者,喜欢C++编程/折腾网站
- Email: eric_ni2008@163.com
- 注册于: 2020-04-05 07:11:36