当前例子: 五张图片横铺
目标: 实现
如何实现上面例子?
只需在 img 样式添加
display: flex;
margin: auto;
个人总结关于水平垂直居中布局
1. 利用元素定位(子绝父相)
_ I._
_ 父元素: position: relative;_
_ 子元素: position: absolute;_
_ II._
_ top:_
_ left:_
_ right:_
_ bottom: _
_ 微调_
2. 利用 text-align: center; 实现元素内文字和行元素垂直居中
3. 利用弹性布局实现居中效果
_ I . display: flex;_
_ margin: auto;_
_ II. display: flex;_
_ align-items: center;_
_ justify-content: center;_
4. 利用行高 line-height: 实现元素内文字和元素垂直居中