绝对定位

绝对定位可以把元素大概定位在垂直居中的位置，然后需要通过margin、transform和calc的方式来调整居中元素一半的距离。

margin+像素数来调整间距

.container {  background: #777777;  height: 400px;  position: relative;}.container .content {  width: 100px;  height: 100px;  position: absolute;  top: 50%;  margin-top: -50px;  left: 50%;  margin-left: -50px;  background: #ee5f28;}

优点：兼容性好。缺点：需要知道居中元素的高度。

transform变形来调整元素的偏离

.container {  background: #777777;  height: 400px;  position: relative;}.container .content {  width: 100px;  height: 100px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  background: #ee5f28;}

在transform变形属性中，我们常用的有translate转换，参数可以为像素数和百分数，表示按一定方向转换当前元素百分比的坐标，所以可以不考虑居中元素的大小。其他常用的属性还有scale缩放，rotate旋转。scale的系数为倍数，即1不缩放，2表示在某个方向上缩放两倍。rotate系数单位为deg表示角度，顺时针为正。并且同时起作用的还有transform-origin这个参数，表示旋转的基准点的坐标，值可以为百分比、像素数、中心，上下左右位置。需要注意的是，在进行变形时，这三个参数的顺序不同，形变的最终效果可能也不同。

通过calc来计算绝对定位的位置

.container {  background: #777777;  height: 400px;  position: relative;}.container .content {  width: 100px;  height: 100px;  position: absolute;  top: calc(50% - 50px);  left: calc(50% - 50px);  background: #ee5f28;}

calc一般用来计算百分比和数量单位的表达式，也是需要知道居中元素的大小。

flex布局

flex布局与传统的绝对定位布局的方式不同，通过父级元素来设定子元素项目排列方向，是否换行等，如果用好了flex布局，你会发现很多布局样式都很简单。

控制父级元素的主轴、交叉轴分布方式

.container {  background: #777777;  height: 400px;  display: flex;  justify-content: center;  align-items: center;}.container .content {  width: 100px;  height: 100px;  background: #ee5f28;}

flex在父元素中通过justify-content:center; 定义了子元素项目在主轴上的对齐方式为居中，align-items:center; 定义子元素项目在交叉轴上的中点对齐，详细资料点击"flex"进行了解。

通过子元素的margin进行调整

.container {  background: #777777;  height: 400px;  display: flex;}.container .content {  width: 100px;  height: 100px;  background: #ee5f28;  margin: auto;}

flex默认会把子级项目排列到左上角，但是如果子级项目加上了margin: auto; 就可以让子元素正常居中了。

参考：https://juejin.cn/post/6844903555342696456

对于初入职场的你想知道行业内技术水平如何么？遇到的技术点有没有由于长期没有再接触容易忘记呢？『全栈编程』刷题小程序就是专门来解决上述两个问题的，其中题目全部出自一线大厂小哥的工作实践，每月刷题最多的同学可以任选100元以内图书一本哦~