元素居中的方式

个人学习记录，随缘更新~可以收藏关注下哦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;