CSS垂直居中总结

  • 使块级元素里面的文本水平居中,在此块级元素添加text-align: center;即可实现。


    image.png
  • 使块级元素里面的内联元素水平居中,在此块级元素上添加text-align: center;即可实现。


    image.png
  • 使块级元素里面的块级元素水平居中,在子元素上添加margin: 0 auto;即可实现。(此种情况,子元素的块级元素必须设置固定的宽度,如果没有固定宽度,块级元素占据正行宽度,就没有水平居中这个说法了)


    image.png
  • 使块级元素里面的多行块级元素文本垂直居中,在父元素上添加padding即可实现。


    image.png
  • 使块级元素里面的单行文本垂直居中,在此块级元素添加line-height的高度等于此块级元素的高度即可即可实现。

image.png
  • 使一个弹窗垂直水平居中,可以使用该绝对定位实现。
image.png
  • 使一个块级元素内的一个行内元素垂直居中,可以使用vertical-align实现。
image.png
  • 使一个块级元素内的一个行内元素垂直居中,可以使用table-cell实现垂直居中。
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容