DIV、内容水平垂直居中

DIV水平垂直居中居中

DIV水平垂直居中一般分为两大类：已知宽度、未知宽度，下面从已知宽度开始

已知宽度

1、Flex布局

父元素：

display: flex;
display: -webkit-flex

-webkit是浏览器前缀，兼容webkit内核 )

justify-content: center

justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

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

align-items: center

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

子元素：

width != 0

2、利用position

父元素：

positon: relative

2.1 子元素：

width = 100px
postion: absolute
left: 50%
top: 50%
margin: -50px（width的一半）0 0 -50px（width的一半）

2.2 子元素：

postion: absolute
top: 0
bottom: 0
left: 0
right: 0
margin: auto

3、table-cell布局

父元素：

display: table-cell
vertical-align: middle

子元素：

margin-left：1/2width
width != 0
height ! = 0

未知宽度

1、利用position

父元素：

positon: relative

子元素：

postion: absolute
left: 50%
top: 50%
transform: translate(-50%,-50%)

内容水平垂直居中

1、文字、图片：

display: table-cell
text-align: center

text-align 属性规定元素中的文本的水平对齐方式。

vertical-align: middle

vertical-align 属性设置元素的垂直对齐方式。

2、两端的元素：

父元素：

display: table

子元素（两端一起设置）：

display: table-cell
width: 40%