一、子元素设置属性
1.绝对定位结合margin:auto
.inner1{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
2.绝对定位结合margin设置指定距离
.inner2{
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
3.绝对定位结合transform
.inner3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
4.css值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。
- vw是与视口宽度相关的,1vw实际上是视口宽度1%,而不是100%
- 与vw类似,1vh表格视口高度的1%。
- 视口宽度小于高度时,1vmin等于1vw,否则等于1vh。
- 视口宽度大于高度时,1vmax等于1vw,否则等于1vh。
.inner4{
margin: 50vh auto 0;
transform: translateY(-50%);
}
二、父元素设置属性
1.父元素flex布局
.outer{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}