块状元素水平垂直居中

块状元素水平垂直居中

1.使用定位

position: absolute;
top:50%;
left:50%;
margin-top:-宽的一半；
margin-top:-高的一半；
div {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}

2.使用定位，用外边框撑开

position: absolute;
top：0；
bottom:0;
left:0;
right:0;
margin:auto;
四个数值一样就行，不局限于0；
div {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}

3.使用定位和2d里的平移

position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
div {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

4.使用定位和函数计算

position: absolute;
top：calc(50%（这里要留空格） - （这里也要留空格）高的一半）；
left：calc(50%（这里要留空格） - （这里也要留空格）宽的一半）；
div {
width: 100px;
height: 100px;
background: #000;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}

之前都是在语雀上记的，想修改或者查找都不太顺手，现在想慢慢把随手记转到CSDN上