元素水平垂直居中

一、水平居中

行内元素水平居中
text-align:center;可以实现在块级元素内部的行内元素水平居中

块级元素水平居中
1、margin:0 auto; 要给该元素定宽

2、用display:table;margin:0 auto;

3、display:flex;+justify-content: center;

4、父元素用display:flex;子元素用margin:0 auto;

多个块级元素水平居中
1、display:flex;+justify-content:center;

2、将子元素转为行内块元素，然后给父元素设置

text-align:center;

浮动元素水平居中
给父元素display:flex;+justify-content:center;

二、垂直居中

单个内联元素垂直居中
给子元素设置行高等于父元素的高度

多个内联元素垂直居中
给父元素设置

display:table-cell;vertical-align:middle;

给内部子元素设置vertical-align:middle;(可以省略)

注：父元素不能使用浮动

三、水平垂直居中
1、给父元素**display:flex;**子元素只用写**margin:auto;**
注：父元素必须有高度

2、给父元素设置display:flex;justify-content:center;align-items:center;
注：父元素必须有高度

3、利用绝对定位+CSS3（不知道该元素大小）

4、利用绝对定位+margin:auto(知道该元素大小)
注：父元素必须有高度