垂直水平居中----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（水平居中）
css
/*第一种*/
.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
css
/*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，将占满整个容器的高度。
align-content ：属性定义了多根轴线的对齐方式，如果项目只有一根轴线，不起作用 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
同上。
stretch（默认值）：轴线占满整个交叉轴。