css3 高级特性(2)：flex和transform 垂直居中
css3 高级特性系列，就是用css3实现一些项目中经常用到的demo，真实场景真实好用
垂直居中是每一个前端开发人员经常遇到的一个需求，不论文字垂直居中，或者图片垂直居中，其实对于单行文本，或者定宽、定高的都是比较好处理，然而在实际开发中大部分情况是不定高的，那么在这种情况下，如何能有简洁优雅的实现呢？
根据一般规则，技术的迭代更新是为了解决以往各种比较难处理的各种问题，而出现新的技术。
接下里我们就用css3中的flex、transform来实现垂直居中。
需求：有一个定宽的图片、文字（文字高度不定），实现图片和文字的垂直居中
前提准备：给文字和图片加一个父盒子，父盒子设置一个边框（方便查看效果）
实现的效果
基本代码结构
html代码
<div class="item_block">
<image class="image" src="./images/css.jpg" />
</div>
<div class="item_block">
<span class="text">HTML5与css3权威指南（第三版 上册）</span>
</div>
css样式
.item_block {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 10px;
}
.image {
width: 100px;
}
.text {
display: block;
width: 150px;
}
flex实现垂直居中
知识储备
flex布局的元素，就是一个容器，所有容器里面的元素就是一个个flex item，
容器默认存在2根轴 水平方向的主轴、垂直方向交叉轴
根据flex布局的特性，设置容器所在元素在主轴方向居中（justify-content ），交叉轴方向居中（align-items），就可以实现里面子元素的垂直居中
.flex_layout {
display: flex;
justify-content: center;
align-items: center;
}
transform垂直居中
知识储备
transform的translate(x,y)方法可以实现X轴、Y轴方向的移动，值可以是具体的像素，也可以是百分比，
值是百分比时，x是盒子本身的宽度的百分比，y是盒子本身的高度的百分比
绝对定位实现垂直居中，实现原理：盒子(子)相对于盒子(父)绝对定位(父相子绝)，向左移动50%(父盒子的50%)，向下移动50%(父盒子的50%)，这时盒子(子)就处于盒子(父)的中心点，此时盒子(子)向上移动本身高度的50%，向右移动自身宽度的50%
如果知道盒子(子)的宽高，可以用margin(-width/2,-height/2)，这样需要计算宽高，如果不知道宽高，那么定位就变得不可控
优雅解决方案：可以使用translate的百分比，只需要取translate的宽高的50% 就是盒子(子)宽高的一半
.trans_layout {
position: relative;
}
.trans_layout .image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.trans_layout .text {
position: absolute;
width: 150px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
参考
结语
如果对本文有任何疑问，欢迎提问哦
如果本文对你有一丁点帮助，点个赞支持一下吧，感谢感谢
本文将同步到个人公众号：言字（欢迎关注👏）
