怎么让一个不定高的内容在容器内水平垂直居中

效果：

一、使用flex （给父级容器设置display: flex; justify-content: center;align-items: center;）

知识点：1、justify-content

• flex-starl    默认值。项目位于容器的开头。
• flex-end    项目位于容器的结尾。
• center    项目位于容器的中心。
• space-between    项目位于各行之间留有空白的容器内
• space-around    项目位于各行之前、之间、之后都留有空白的容器内。
• initial    设置该属性为它的默认值。
• inherit    从父元素继承该属性。

知识点2、align-items

• stretch    默认值。元素被拉伸以适应容器。
• center    元素位于容器的中心。
• flex-start    元素位于容器的开头。
• flex-end    元素位于容器的结尾。
• baseline    元素位于容器的基线上。
• initial    设置该属性为它的默认值。
• inherit    从父元素继承该属性。

二、使用display：table-cell

• 容器设置:display:table-cell; text-align:center;vertical-align:middle;
• 内容设置: display:inline-block;vertical-align:middle;）

将容器设置成表格格式  内容设置行内块元素  直接居中对齐

三、使用css3 transform

• 容器设置:position:relative
• 内容设置: transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;

将容器相对定位并在标准文本流中站位    利用translate 做2d旋转将内容横纵全部移出一般  在将内容绝对定位到容器的50%的位置

​​