CSS 关于水平垂直居中小结

139 阅读1分钟

当前例子: 五张图片横铺

目标: 实现

如何实现上面例子?

只需在 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:   实现元素内文字和元素垂直居中