2021-07-03

区分margin&transform水平垂直居中的方法

方法一：利用负的margin-left、margin-top分别为自身盒子的宽度、高度的一半值，注：此方法必须知道自身盒子的宽高
.box {
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
/定位可以是绝对定位和固定定位，但不可以是相对定位/
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
方法二：利用transform: translate(-50%, -50%);往x(向左),y(向上)移动自身长宽的 50%，以使其居于中心位置。注：此方法可以在不知道自身盒子宽高的情况下进行居中
.box1 {
padding: 10px;
background: green;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}