面试了许多求职者,很多求职者只知其然,而不知所以然,写此文章为广大前端小伙伴指引迷津。纯干货!纯干货!纯干货!
目录
水平居中
行内元素水平居中?
水平:text-align:center;
垂直:
单行文本:line-height = height;
多行文本:display:table-cell;vertical-align:middle;
块状元素居中?
grid布局: display: grid; align-content: center; justify-content: center;
flex布局: display: flex; justify-content: center; align-items: center;
绝对定位方法:绝对定位下top left right bottom 都设置0 ,magin:auto;
绝对定位方法:确定当前div的宽度和高度,采用margin值为当前div宽度高度一半的负值
绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)