元素居中的方式

个人学习记录,随缘更新~可以收藏关注下哦o( ̄▽ ̄)ブ

1.行内元素水平垂直居中(注意是加在父级盒子上)

  • 水平:text-align:center
  • 垂直:line-height:盒子高度

2.块级元素

水平居中

  • margin:0 auto;

水平垂直都居中

  • 采用定位(子绝父相)position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)

  • flex布局 设置容器属性 display:flex; justify-content:center; align-items:center;

  • grid(网格)布局 设置容器属性 display:grid; justify-content:center; align-items:center;

  • table-cell布局 设置容器属性 display:table-cell; vertical-align:middle; text-align:center;

#我的秋招日记#
全部评论
加油
点赞 回复 分享
发布于 2022-07-25 23:25

相关推荐

点赞 评论 收藏
分享
11-11 16:40
已编辑
门头沟学院 人工智能
不知道怎么取名字_:这个有点不合理了,相当于已经毕业了,但还是没转正,这不就是白嫖
点赞 评论 收藏
分享
评论
点赞
3
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务