CSS系列-元素居中

121 阅读1分钟

面试了许多求职者,很多求职者只知其然,而不知所以然,写此文章为广大前端小伙伴指引迷津。纯干货!纯干货!纯干货!

目录

水平居中

行内元素水平居中?
水平: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;)

小白也是新手面试官,欢迎领导莅临指导工作,提出建议,小白不胜感激,不喜勿喷,点赞收藏随机送程序媛小姐姐一枚哦!!!