css水平垂直居中

一、行内元素的水平居中（text-align:center;）

实现行内元素（字，链接，及其inline或者inline-block、inline-table和inline-flex，例如span、a等）的水平居中，只需把行内元素包裹在块级父层元素.（div、li、p等）中，并且在父层元素CSS设置text-align:center;

二、块状元素的水平居中（margin:0 auto;）

实现块状元素（display:block，例如div、li、p）的水平居中，我们只需要将它的左右外边距设置为auto，即可实现块状元素的居中.

三、多个块状元素的水平居中

实现多个水平排列的块状元素的水平居中，将要水平排列的块状元素设为内联块inline-block，其父级元素设置text-align:center，同行内元素的水平居中。

四、flex实现多个块状元素的水平居中

Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
flex的6个属性
flex-direction属性决定主轴的方向（row | row-reverse | column |column-reverse）
flex-wrap默认都排在轴线 （nowrap不换行 | wrap换行，第一行在上方 | wrap-reverse换行，第一行在下方）
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。（flex-start左对齐 |flex-end 右对齐| center居中 | space-between两端对齐，项目之间的间隔都相等|space-around每个项目两侧的间隔相等）
align-items属性定义项目在交叉轴上如何对齐（flex-start交叉轴的起点对齐 | flex-end交叉轴的终点对齐 |center交叉轴的中点对齐| baseline项目的第一行文字的基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度）
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex布局只需将 display: flex;（ flex默认为一个块级元素，如果要定义为行内级元素，需将display: inline-flex;），得到一个伸缩容器

flex{
	justify-content:center;
    display:flex;
}

1、已知高度宽度元素的水平垂直居中

.parent{
    position:relative;
}
.child{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
或者
.child{
    width:100px;
    height:100px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

2、未知高度宽度元素的水平垂直居中
需要被居中的子元素是inline或者inline-block元素,可以父元素设置为display:table-cell，并设置text-align:center（水平）和vertical-align:middle（垂直）即可以实现水平垂直居中

.parent{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

CSS3的transform，可以未知元素高宽的情况下实现水平垂直居中

.parent{
    position:relative;
}
 
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex实现元素的水平垂直居中

.parent{
    display:flex;
    display: -webkit-flex;  /* Safari */
    justify-content:center;
    align-items: center;
}