效果:
一、使用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%的位置