第一部分:单个子元素


1.父相子绝 + transform

2.父元素设置相对定位,子元素设置绝对定位,四个方向设置为0,margin值设置auto

3.父元素设置 display:grid,子元素设置 place-self:center

第二部分:多个子元素(单个子元素或者多个子元素都行)


1.父元素直接设置 display:flex 和 justify-content:center、align-items:center

2.父元素 display:flex,子元素 margin auto

3.父元素组合使用 display:table-cell 和 vertical-align、text-align,子元素display:inline-block 使所有行内元素水平垂直居中

6.多行文本垂直居中,对父元素设置display为table属性,模拟表格 对子元素设置display:table-cell、vertical-align:middle

多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容 多行文本内容