css变成块级元素_css块级元素垂直居中常用布局方式

在项目中经常会用到垂直居中布局，本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用，flex的使用进行梳理。让大家能够理解之后进行举一反三。

以下例子如果未特别说明统一使用这样的html结构：

class="container"> <div class="content">div></div>

绝对定位

绝对定位可以把元素大概定位在垂直居中的位置，然后需要通过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元以内图书一本哦~