CSS实现文字和图片的水平垂直居中

目录

  • 一、文本的水平垂直居中:
    • 1、水平居中:
    • 2、垂直居中:
      • (1)、单行文本
      • (2)、多行文本
        • 情况1:高度固定
        • 情况2:父级高度固定,嵌套行内元素
        • 情况3:父级高度固定,嵌套块级元素且该元素高确定
        • 情况4:父级高度固定,嵌套块级元素且该元素高不确定
        • 情况5:父子均 定宽 定高 (水平垂直居中)
  • 二、图片的水平垂直居中:
    • 1、水平居中:
    • 2、垂直居中水平居中:

        关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法:

一、文本的水平垂直居中:

1、水平居中:

text-align:center

 

	
"father"> "son">我是文本

结果:
CSS实现文字和图片的水平垂直居中_第1张图片

2、垂直居中:

(1)、单行文本

只要height值等于line-height值就

 

	
"father"> "son">我是文本

结果:
CSS实现文字和图片的水平垂直居中_第2张图片
将子元素换成块级元素。



	
"father">
"son">我是文本

结果:
CSS实现文字和图片的水平垂直居中_第3张图片
ps:height === line-height 无法使替换元素,如