css实现元素居中的方式

一，使用定位position和3D转换transformX

.location {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
}
   

二，使用flex布局

.flex {
    display: flex;
    align-items: center;
    justify-content:center;
}

三，使用grid布局

.grid {
    display: grid;
    place-items:center;
}

四，使用外边距margin居中, 前提条件：设置外边距margin:auto;居中时，其设置的css元素必须是"块级元素".

.box {
  margin: auto;
}