css垂直水平居中(父元素宽高有无情况）+ flex用法

垂直水平居中----6种方法

知道父元素具体宽高时：

父元素设置display:flex, 子元素设置 margin:auto.
父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto.
父元素相对定位，子元素绝对定位，left:50%,top:50%,transform:translate(-50%,-50%)
flex布局，父元素 display:flex,justify-content:center,align-items:center
网格布局：父元素 display:grid,justify-content:center,align-items:center
父元素display:table-cell,vertical-align:middle(垂直居中)，子元素margin:auto（水平居中）

/*第一种*/.parent{width: 600px;height: 600px;display: flex;border: 1px solid royalblue;}.child{width: 100px;height: 100px;background: red;margin: auto;}
/*第二种*/.parent{width: 600px;height: 600px;border: 1px solid green;position: relative;}.child{width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
/*第三种*/.parent{width: 600px;height: 600px;border: 1px solid green;position: relative;}.child{width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/*第四种*/.parent{width: 600px;height: 600px;border: 1px solid green;display: flex;justify-content: center;align-items: center;}.child{width: 100px;height: 100px;background: red;}/*第五种*/.parent{width: 600px;height: 600px;border: 1px solid green;display: grid;justify-content: center;align-items: center;}.child{width: 100px;height: 100px;background: red;}/*第六种*/.parent{width: 600px;height: 600px;border: 1px solid green;display: table-cell;vertical-align: middle;}.child{width: 100px;height: 100px;background: red;margin: auto;}

未知父元素宽高时：

可以设置html,body{display:flex,justify-content:center,align-items:center},宽高100%
可以设置html,body{width:100%,height:100%},子元素相对定位 position: relative;top: 50%;left:50%;transform: translate(-50%,-50%);
可以设置html,body宽高百分比，子元素相对定位position: relative;margin:0 auto;top:50%;transform:translateY(-50%)
可以设置html,body宽高百分百,body{display:flex}，子元素margin:auto

 /*4*/html,body{width: 100%;height: 100%;padding: 0; margin: 0;}body{display: flex}.box{width: 400px;height: 400px;background-color: aquamarine;margin: auto; //居中}

注意点

为什么设置css-margin:auto 只能实现水平居中，不能实现垂直居中?
因为auto的作用是：自动填充剩余空间。
块级元素在水平方向上自动填充一整行，而在垂直方向上不会自动填充。所以块级元素在水平方向上，左右的margin会平分剩余空间，在垂直方向上，没有剩余空间可平分，即只呈现水平居中的效果。

flex用法

弹性布局
具有6个属性：

flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content

flex-direction:属性决定主轴的方向 flex-direction：row | row-reverse | column | column-reverse
row(默认):主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右侧。
column:主轴为垂直方向，起点在上沿。
column-reverse:主轴为垂直方向，起点在下沿。

flex-wrap : 默认项目都排在一条线上，如果一条线上排不下，如何换行，flex-wrap:nowrap | wrap | wrap-reverse。
nowrap:不换行。
wrap：换行，第一行在上方。
wrap-reverse:换行，第一行在下方。
flex-flow： 属性是 flex-direction和 flex-wrap 简写形式。默认值为 row nowrap
flex-flow: flex-direction flex-wrap

justify-content :属性定义了项目在主轴上的对齐方式 justify-content:flex-start | flex-end | center | space-between | space - around | space-evenly
flex-start:从头开始对齐。
flex-end:从尾开始对齐。
center :居中。
space-butween:两端对齐,项目之间间隔都相等。
space-around:只有内部项目彼此之间的间距相等，第一项和最后一项对边缘的距离将分配中间一半的间距。
space-evenly:项目分布使得任何两个项目之间的间距（以及边缘的空间）相等。

align-items :属性定义项目在交叉轴上如何对齐 align-items:flex-start | flex-end | center | baseline | stretch
flex-start:交叉轴的起点对齐。
flex-end：交叉轴上终点对齐。
center :交叉轴上中点对齐。
baseline :项目的第一行文字的基线对齐。
stretch(默认):如果项目未设置高度或设置auto，将占满整个容器的高度。